jQuery 中的自定义动画 HTML5 进度条

版本:

浏览量:1129

最后更新：2021-09-11

应用标签：MAC 软件 Jquery插件 git

推荐指数:

查看演示点击下载

详细信息

这是一个使用 jQuery 和原生 HTML5 <progress />元素创建自定义动画进度条组件的小脚本。

如何使用它：

1. 创建一个普通的 HTML5 进度条来显示任务的进度。

<progress id="progressbar" value="0" max="100"></progress>

2. 创建一个值元素来显示已经完成了多少任务。

<span class="progress-value">0%</span>

3.自定义进度条的外观。

progress {
  background-color: #f3f3f3;
  border: 0;
  width: 80%;
  height: 18px;
  border-radius: 9px;
}
 
progress::-webkit-progress-bar {
  background-color: #f3f3f3;
  border-radius: 9px;
}
 
progress::-webkit-progress-value {
  background: #209e9c;
  background: -moz-linear-gradient(top,  #209e9c 0%, #066767 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#209e9c), color-stop(100%,#066767));
  background: -webkit-linear-gradient(top,  #209e9c 0%,#066767 100%);
  background: -o-linear-gradient(top,  #209e9c 0%,#066767 100%);
  background: -ms-linear-gradient(top,  #209e9c 0%,#066767 100%);
  background: linear-gradient(to bottom,  #209e9c 0%,#066767 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#209e9c', endColorstr='#066767',GradientType=0 );
  border-radius: 9px;
}
 
progress::-moz-progress-bar {
  background: #209e9c;
  background: -moz-linear-gradient(top,  #209e9c 0%, #066767 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#209e9c), color-stop(100%,#066767));
  background: -webkit-linear-gradient(top,  #209e9c 0%,#066767 100%);
  background: -o-linear-gradient(top,  #209e9c 0%,#066767 100%);
  background: -ms-linear-gradient(top,  #209e9c 0%,#066767 100%);
  background: linear-gradient(to bottom,  #209e9c 0%,#066767 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#209e9c', endColorstr='#066767',GradientType=0 );
  border-radius: 9px;
}

4. 在文档末尾加载最新的 jQuery JavaScript 库。

<script src="/path/to/cdn/jquery.slim.min.js"></script>

5. jQuery 脚本动画进度条。

$(() => {
  {
    let progressbar = $('#progressbar');
    let max = progressbar.attr('max');
    let time = (1000 / max) * 5;
    let value = progressbar.val();
 
    const loading = () => {
      value += 1;
      progressbar.val(value);
 
      $('.progress-value').html(value + '%');
 
      if (value == max) {
        clearInterval(animate);
      }
    };
    const animate = setInterval(() => loading(), time);
  };
});

联系我们