帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery动态百分比进度条插件

帝国模板之家 2020-12-14 网页特效 评论

插件介绍

轻量级的jQuery进度插件,可以在进度条组件中设置、获取和更新百分比值,支持基于API响应的实时百分比计算。同时兼容Bootstrap的进度条组件。

使用方法

1.在页面中加载jQuery插件和进度条插件文件。

<script src="jquery.min.js"></script>
<script src="jquery-progress-lgh.js"></script>

2. 在网页中添加一个进度条组件(像Bootstrap progressbar组件一样).

<div class="progress-bar" role="progressbar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="demo"></div>

3. 使用下面的回调函数。

const progress = new Progress({
      get: function () {
        percentage = percentage + Math.random()*10|0;
        if(percentage>100){
            percentage = 100;
        }
        progress.update(percentage);
      },
      set: function (percentage) {
        switch(type) {
          case 'bootstrap':
            filter.css('width', percentage+'%').text(percentage+'%');
            break;
          case 'layui':
            element.progress(filter, percentage + '%');
            if (index && percentage === 100) {
              layer.close(index);
            }
            break;
          default:
        }
      }
});

4. 或者根据API(JSON)的响应获取百分比值。

const progress = new Progress({
      url: '/path/to/API',
      data: {
        // parameters here
      },
      set: function (percentage) {
        // update the progress bar
      }
});

5. 启动进度条。

progress.start();

6.插件更多配置参数。

const progress = new Progress({

      // current percentage
      percentage: 0, 

      // debounce options
      debounce: true,
      debouncePercentage: 0,
      
      // progress timer
      pf0: null,

      // debounce timer
      pf1: null, 

      // progress delay
      pf0Delay: 1000,

      // debounce delay
      pf1Delay: 50
      
});

7.API方法.

// update the progress bar with or without debounce
progress.update(percentage, jump); 

// update the progress bar to 100%
progress.finish();

// reset the progress bar
progress.reset();
美梦,诞生在一瞬间,这短暂的喜悦,也就像泡沫一样,往往

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言