带有数字显示的加载进度条效果 - 代码效果

有的时候，在我们的应用程序中，我们希望能够显示特定任务的百分比进度。这里分享的这款小巧的 java script 插件就是实现这个功能，易于使用和定制，而且是是免费开源的。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>NumberProgressBar</title>
  <link rel="stylesheet" type="text/css" href="daima/number-progress/assets/number-progress/assets/normalize.css">
  <link rel="stylesheet" type="text/css" href="daima/number-progress/assets/style.css">
  <link rel="stylesheet" type="text/css" href="daima/number-progress/assets/number-pb.css">
  <style>
  body {
  	font-family: Verdana,Arial,Helvetica,sans-serif;
  }
  .top-banner a {
  	color: #FF534E;
  }
  </style>
</head>
<body>

<div class="container">
  <h1 style="margin-top:100px">Number Progress Bar</h1>

<section id="random">
    <article>
      <h4 class="title">Random</h4>
      <div class="number-pb">
        <div class="number-pb-shown"></div>
        <div class="number-pb-num">0</div>
      </div>
    </article>
  </section>

<p><a href="http://kalasoo.me" target="_blank">Ming YIN</a></p>
  <p><a href="https://github.com/daimajia/NumberProgressBar" target="_blank">This idea</a> was originally designed by <a href="#">Daimajia</a> on Andriod.</p>
  <div class="footer-banner" style="width:728px; margin:60px auto"></div>
</div>

function randomInterval() {
      var min = Math.floor(Math.random() * 100);
      var max = min + (Math.floor(Math.random() * 40) + 20);
      return [min, max];
    }

function randomStyle() {
      return ['', 'dream', 'sun'][Math.floor(Math.random() * 3)];
    }

var interval = randomInterval();
    var randomTitle = $('#random .title');
    var randomBar = $('#random .number-pb').NumberProgressBar({
        min: interval[0],
        max: interval[1]
      })
    randomBar.find('.number-pb-shown').toggleClass(randomStyle());
    randomTitle.text('Random [Min: ' + interval[0] + ', Max: ' + interval[1] + ']');

var reachLoop = function() {
      window.setTimeout(function() {
        randomBar.reach(undefined, {
          complete: reachLoop
        }).find('.number-pb-shown').toggleClass(randomStyle());
      }, 2000);
    }

reachLoop();

var num = randomPercentage();
    var controlTitle = $('#sample-pb .title').text('@' + num);
    var controlBar = $('#sample-pb .number-pb').NumberProgressBar({
      duration: 12000,
      current: num
    });

提示：输入修改代码都可运行！