Percentage Loader - jQuery 进度条插件

版本:

浏览量:1454

最后更新：2021-09-12

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

推荐指数:

查看演示点击下载

详细信息

一个使用 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);
     
  });
});