Percentage Loader - jQuery 进度条插件

Percentage Loader - jQuery 进度条插件

版本:

浏览量:67

最后更新:2021-09-12

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

一个使用 jQuery 构建的时尚加载插件,用于以视觉和引人入胜的方式显示带有百分比和剩余文件大小的进度条。

用法:

1. 在 head 部分包含 jQuery Library 和 jquery.percentageloader-0.1.js。

<script src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous">
</script>
<script src="src/jquery.percentageloader-0.1.js"></script>

2. 添加 CSS。

<link rel="stylesheet" href="src/jquery.percentageloader-0.1.css">
<style>
body { margin: 0px; padding: 0px; }
#topLoader { width: 256px; height: 256px; margin-bottom: 32px; }
#container { width: 940px; padding: 10px; margin-left: auto; margin-right: auto; }
#animateButton { width: 256px; }
</style>

3. 补妆

<div id="container">
<div id="topLoader"> </div>
<button id="animateButton">Animate Loader</button>
</div>

4. 调用该函数以启用百分比加载器。

$(function() {
  var $topLoader = $("#topLoader").percentageLoader({width: 256, height: 256, controllable : true, progress : 0.5, onProgressUp<a href="https://www.jqueryscript.net/time-clock/">date</a> : function(val) {
      $topLoader.setValue(Math.round(val * 100.0));
    }});
 
  var topLoaderRunning = false;
  $("#animateButton").click(function() {
    if (topLoaderRunning) {
      return;
    }
    topLoaderRunning = true;
    $topLoader.setProgress(0);
    $topLoader.setValue('0kb');
    var kb = 0;
    var totalKb = 999;
     
    var animateFunc = function() {
      kb += 17;
      $topLoader.setProgress(kb / totalKb);
      $topLoader.setValue(kb.toString() + 'kb');
       
      if (kb < totalKb) {
        setTimeout(animateFunc, 25);
      } else {
        topLoaderRunning = false;
      }
    }
     
    setTimeout(animateFunc, 25);
     
  });
});

变更日志:

2018-07-11

  • 固定演示页面

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。