h5加载进度条

html代码

  <div id="plan">
    <p id="planning">进度：0%</p>
    <progress id="proceed" max="100" value="0"></progress>
  </div>

使用progress标签，设置好min和max数值。可以用value获取其中的进度值
js代码

  function plan() {
    var proceed = document.getElementById('proceed')
    var planning = document.getElementById('planning')
    var timer = setInterval(function () {
      if (proceed.value !== 100) {
        proceed.value++
        planning.innerHTML = '进度：' + proceed.value + '%'
      } else {
        planning.innerHTML = '加载完成'
        clearInterval(timer)
      }
    }, 100)
  }
  plan() 

效果如下

---

使用div模仿进度条
html代码

  <!--外层容器-->
  <div id="wrapper">
    <!--进度条容器-->
    <div id="progressbar">
      <!--用来模仿进度条推进效果的进度条元素-->
      <div id="fill"></div>
    </div>
  </div>

css代码

    #wrapper {
      position: relative;
      width: 200px;
      height: 100px;
      border: 1px solid darkgray;
    }

    #progressbar {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -90px;
      margin-top: -10px;
      width: 180px;
      height: 20px;
      border: 1px solid darkgray;

    }

    /*在进度条元素上调用动画*/
    #fill {
      animation: move 12s;
      text-align: center;
      background-color: #6caf00;
    }

    /*实现元素宽度的过渡动画效果*/
    @keyframes move {
      0% {
        width: 0;

      }

      100% {
        width: 100%;
      }
    }

js代码

  var progressbar = {
    init: function () {
      var fill = document.getElementById('fill');
      var count = 0;
      //通过间隔定时器实现百分比文字效果,通过计算CSS动画持续时间进行间隔设置
      var timer = setInterval(function (e) {
        count++;
        fill.innerHTML = count + '%';
        if (count === 100) clearInterval(timer);
      }, 100);
    }
  };
  progressbar.init();

效果图

注意这里计时器的间隔要和css动画的执行时间要相对应