vue进度条

最新推荐文章于 2024-05-23 18:55:14 发布

longda0_o

最新推荐文章于 2024-05-23 18:55:14 发布

阅读量532

点赞数 1

文章标签： html css vue.js

本文链接：https://blog.csdn.net/longda0_o/article/details/121412893

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
       .progress{
           width: 500px;
            margin:100px;
            display: flex;
            flex-direction: column;
            text-align: right;

        }
        .progress-bar{
            height: 6px;
            border-radius: 100px;
            background-color: #ebeef5;
            width: 500px;
            position: relative;
        }        

        .progress-bar_inner{
            position: absolute;
            height: 100%;
            width: 50%;
            left: 0;
            bottom: 0;
            background: #409eff;
            border-radius: 100px;
        }

        
    </style>

<body>
    <div class="progress" id="app">
    <div class="progress-bar">
        <div class="progress-bar_inner" :style="{width:width +'%'}"></div>
    </div>
    <p>{{width}}%</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                width:0,
            },
            created() {
                this.change()
            },
            methods: {
              change:function(){
                  var clear = setInterval(() => {
                      this.width++
                      if(this.width==100){
                          clearInterval(clear)
                          setTimeout(()=>{
                            this.width = 0;
                            this.change()
                          },2000)
                      }
                  }, 20);
              }
            }
        })
    </script>
</body>
</html>