进度条实现简易demo

Posted 2020-07-12

直接上效果图：

浏览网站的时候看到的小demo，记下笔记。一个很简单的进度条，原代码处理较为全面，这里我改了一下便于新手查看。

html代码如下：

<!--很简单的一个容器-->
    <div class="container">
      <p>loading</p>
      <h1>0%
      </h1>
      <hr/>
    </div>

css部分:

      body{
        background: black;
      }
      /*处理容器*/
      .container {
        text-align: center;
        height: 200px;
        width: 400px;
        position: absolute;
        top:50%;
        left: 50%;
        margin-left: -200px;
        margin-top: -100px;
      }
      /*处理"loading"*/
      .container p {
        font-size: 40px;
        font-weight: 100;
        color: #f60d54;
      }
      
      /*百分比字体大小*/
      .container h1 {
        color: white;
        font-size: 50px;
        margin-top: -10px;
      }
      
      /*进度条处理*/
      .container hr {
        background: #f60d54;
        border: none;
        height: 1px;
      }

js部分：

$(document).ready(function() {
      var a = 0;
      var c = 0;
      var i = setInterval(function() {
        $(".container h1").html(c + "%");
        $(".container hr").css("width", c + "%");
        a++;
        c++;
        if (a == 101) {
          clearInterval(i);
        }
      }, 50);
    });

此处记得把jquery引进。

没有什么难以理解的部分