利用css3＋jQuery做出酷炫的loading bar ＋計數動態

以往的loading bar 都是死板板沒有什麼動畫特效的。

使用css3的“transform””,"transition"等屬性來實現具有動態效果的loading bar外加網路上找到的計數動態js code搭配起來特別有感覺～

1.circle動態使用方式

//首先head中引入ＣＳＳ
 <link rel="stylesheet" href="css/circle.css">

       <div  class="c100  big green test">  //class解析c100=灰色100%bar條 ; big=大圓（可更換small）會變小圓;green=顏色（可依個人喜好自行增加）
                <span id="test">50</span>//此ＩＤ是為了jquery控制，當抓到裡面的值多少時，會有多長的bar
                <div class="slice">
                    <div class="bar"></div> //控制bar長度的地方
                    <div class="fill"></div>
                </div>
            </div>

//引入jquery.js
<script src="jquery-1.11.3.min.js"></script>

   <script>
    jQuery(function() {
        var x = $('#test').html();//宣告一個變數x＝test裡面的內容（上方html裡面的內容）

        $('.test').addClass('p' + x);//接著在class=test 的地方加上一個class(p1~p100)引入的css內容已經寫好了1~100的bar了，所以只要帶入class即可，範例中是擷取"p50"
    });

// 數字動態計數效果js，寫入即可
    $(function() {
    function count($this){
        var current = parseInt($this.html(), 10);
        $this.html(++current);
        if(current !== $this.data('count')){
            setTimeout(function(){count($this)}, 50);
        }
    }        
  $("#test").each(function() {   //此ＩＤ="test"可依你的div下的id做修改
      $(this).data('count', parseInt($(this).html(), 10));
      $(this).html('0');
      count($(this));
  });
});
</script>

2.progress Bars動態使用方式

//首先head中引入ＣＳＳ
 <link rel="stylesheet" href="css/circle.css">

  <div class="meter">
                <span style="width: 25%"></span>
            </div>

//引入jquery.js
<script src="jquery-1.11.3.min.js"></script>

   <script>
//progress bar  
    $(function() {    //帶入此段code會依span style="width:25%" 的width寬度來決定bar的寬度 
        $(".meter > span").each(function() {
            $(this)
                .data("origWidth", $(this).width())
                .width(0)
                .animate({
                    width: $(this).data("origWidth")
                }, 1200);
        });
    });


</script>

完成示意圖：