jQuery圆形百分比加载插件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery圆形百分比加载插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery圆形百分比加载插件</title>
 <script src="src/jquery.min.js"></script>
    <script src="src/jquery.percentageloader-0.1.js"></script>
    <link rel="stylesheet" href="src/jquery.percentageloader-0.1.css"></script>

    <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>
  
  </head>
  <body>
    <div id="container">
      <div id="topLoader">      
      </div>
      
      <button id="animateButton">Animate Loader</button>
      
       <script>
        $(function() {
          var $topLoader = $("#topLoader").percentageLoader({width: 256, height: 256, controllable : true, progress : 0.5, onProgressUpdate : 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);
            
          });
        });      
      </script>
    </div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)