进度条慢慢往前增长

项目中遇到需要写一个进度条，模拟进度前进

先贴js代码

$(function () {
    var i = 0;
    var interval;
    interval = setInterval(function () {
      if (i >= 100) {
        window.clearInterval(interval);
      }
      $('#progress-bar-id').css("width", i++ + '%');
    }, 20);
  });

html端

<div class="progress-bar-mid-in-it" id="progress-bar-id">

想实现的目标为：进度条从1涨到100

实现步骤：

div初始宽度为0，给定一个id

setInterval函数下，频率设定20毫秒一次，设定初始i=0，后面加一个百分号替换width，初始则是0%，开始宽度从0开始累加到100%，

判断当i也就是宽度等于100的时候，setInterval函数停止。