二月 2, 2016 | 前端與Vue

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

以往的loading bar 都是死板板沒有什麼動畫特效的。 使用css3的“transform””,"transition"等屬性來實現具有動態效果的loading bar外加網路上找到的計數動態js code搭配起來特別有感覺~

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

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

1.circle動態使用方式

//首先head中引入CSS
 <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>//此ID是為了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() {   //此ID="test"可依你的div下的id做修改
      $(this).data('count', parseInt($(this).html(), 10));
      $(this).html('0');
      count($(this));
  });
});
</script>

2.progress Bars動態使用方式

//首先head中引入CSS
 <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>

完成示意圖: