CSS3動態進度條及jQ百分比數字顯示

作者：覺唯 2012-12-24 11:13:17

今天就為大家分享一個利用css3制作動態進度條以及附加jQuery百分比數字顯示。其效果對比flash來說卻毫不遜色，有一個精致的動畫進度條，上面還有當前進度的百分比數字顯示，而且還會跟著進度條而移動。相信追求新穎的朋友來說一定會非常的喜歡。

在網頁設計中，想必一個精彩的進度條將會為你的網站增添不少的精彩，一個好的網頁設計往往體現在一些小的細節上面，細節決定了成功與否。在此之前也為大家分享了一些關于進度條的設計 ― 讓人不得不愛的22個UI進度條設計。有了設計理念和作品，那我們怎么用最精彩的方法運用到我們的網頁制作當中呢﹖

查看預覽

HTML代碼

HTML的代碼非常簡單，只要為進度條提供一個容器就可以了。基本的HTML代碼如下：

<div class="wrapper"> 
  <div class="load-bar"> 
    <div class="load-bar-inner" data-loading="0"> <span id="counter"></span> </div> 
  </div> 
  <h1>Loading</h1> 
  <p>Please wait...(By:<a href="http://www.jiawin.com">www.jiawin.com</a>)</p> 
</div>

CSS樣式表

接下來是為我們的進度條定義樣式，這里主要運用了CSS3的linear-gradient的漸變屬性、border-radius的圓角屬性、 box-shadow的陰影屬性等等，來制作出進度條的初步模型。完成進度條的模型后我們利用animation屬性，讓進度條開始動起來，就其中的進度條動畫設置代碼如下：

.load-bar-inner {  
    height: 99%;  
    width: 0%;  
    border-radius: inherit;  
    position: relative;  
    background: #c2d7ac;  
    background: linear-gradient(#e0f6c8, #98ad84);  
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),  0 1px 5px rgba(0, 0, 0, 0.3),  0 4px 5px rgba(0, 0, 0, 0.3);  
    animation: loader 10s linear infinite;  
}

如果接觸了CSS3的朋友，相信大多數人對這個屬性都比較熟悉了，在這里大概的說明一下animation設置的參數：

設置對象所應用的動畫名稱：loader

設置對象動畫的持續時間：10s

設置對象動畫的過渡類型：linear （線性過渡，等同于貝塞爾曲線）

設置對象動畫的循環次數：infinite （無限循環）

@keyframes loader這個標簽屬性是用來被animation使用的，定義動畫時，簡單的動畫可以直接使用關鍵字from和to，即從一種狀態過渡到另一種狀態：

@keyframes loader {  
 from {  
width: 0%;  
}  
to {  
    width: 100%;  
}  
}

下面是完整的CSS代碼，大家可以多研究下，也可以自己修改其中的代碼，看看是否制作出更加有趣的東西來：

* {  
    box-sizing: border-box;  
}  
html {  
    height: 100%;  
}  
body {  
    background: #efeeea;  
    background: linear-gradient(#f9f9f9, #cecbc4);  
    background: -moz-linear-gradient(#f9f9f9, #cecbc4);  
    background: -webkit-linear-gradient(#f9f9f9, #cecbc4);  
    background: -o-linear-gradient(#f9f9f9, #cecbc4);  
    color: #757575;  
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;  
    text-align: center;  
}  
h1, p {  
    padding:0; margin:0;  
}  
.wrapper {  
    width: 350px;  
    margin: 200px auto;  
}  
.wrapper p a {color:#757575; text-decoration:none;}  
.wrapper .load-bar {  
    width: 100%;  
    height: 25px;  
    border-radius: 30px;  
    background: #dcdbd7;  
    position: relative;  
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8),  inset 0 2px 3px rgba(0, 0, 0, 0.2);  
}  
.wrapper .load-bar:hover .load-bar-inner, .wrapper .load-bar:hover #counter {  
    animation-play-state: paused;  
    -moz-animation-play-state: paused;  
    -o-animation-play-state: paused;  
    -webkit-animation-play-state: paused;  
}  
.wrapper .load-bar-inner {  
    height: 99%;  
    width: 0%;  
    border-radius: inherit;  
    position: relative;  
    background: #c2d7ac;  
    background: linear-gradient(#e0f6c8, #98ad84);  
    background: -moz-linear-gradient(#e0f6c8, #98ad84);  
    background: -webkit-linear-gradient(#e0f6c8, #98ad84);  
    background: -o-linear-gradient(#e0f6c8, #98ad84);  
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),  0 1px 5px rgba(0, 0, 0, 0.3),  0 4px 5px rgba(0, 0, 0, 0.3);  
    animation: loader 10s linear infinite;  
    -moz-animation: loader 10s linear infinite;  
    -webkit-animation: loader 10s linear infinite;  
    -o-animation: loader 10s linear infinite;  
}  
.wrapper #counter {  
    position: absolute;  
    background: #eeeff3;  
    background: linear-gradient(#eeeff3, #cbcbd3);  
    background: -moz-linear-gradient(#eeeff3, #cbcbd3);  
    background: -webkit-linear-gradient(#eeeff3, #cbcbd3);  
    background: -o-linear-gradient(#eeeff3, #cbcbd3);  
    padding: 5px 10px;  
    border-radius: 0.4em;  
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),  0 2px 4px 1px rgba(0, 0, 0, 0.2),  0 1px 3px 1px rgba(0, 0, 0, 0.1);  
    left: -25px;  
    top: -50px;  
    font-size: 12px;  
    font-weight: bold;  
    width: 44px;  
    animation: counter 10s linear infinite;  
    -moz-animation: counter 10s linear infinite;  
    -webkit-animation: counter 10s linear infinite;  
    -o-animation: counter 10s linear infinite;  
}  
.wrapper #counter:after {  
    content: "";  
    position: absolute;  
    width: 8px;  
    height: 8px;  
    background: #cbcbd3;  
    transform: rotate(45deg);  
    -moz-transform: rotate(45deg);  
    -webkit-transform: rotate(45deg);  
    -o-transform: rotate(45deg);  
    left: 50%;  
    margin-left: -4px;  
    bottom: -4px;  
    box-shadow:  3px 3px 4px rgba(0, 0, 0, 0.2),  1px 1px 1px 1px rgba(0, 0, 0, 0.1);  
    border-radius: 0 0 3px 0;  
}  
.wrapper h1 {  
    font-size: 28px;  
    padding: 20px 0 8px 0;  
}  
.wrapper p {  
    font-size: 13px;  
}  
 @keyframes loader {  
 from {  
width: 0%;  
}  
to {  
    width: 100%;  
}  
}  
 @-moz-keyframes loader {  
 from {  
width: 0%;  
}  
to {  
    width: 100%;  
}  
}  
 @-webkit-keyframes loader {  
 from {  
width: 0%;  
}  
to {  
    width: 100%;  
}  
}  
 @-o-keyframes loader {  
 from {  
width: 0%;  
}  
to {  
    width: 100%;  
}  
}  
 
 @keyframes counter {  
 from {  
left: -25px;  
}  
to {  
    left: 323px;  
}  
}  
 @-moz-keyframes counter {  
 from {  
left: -25px;  
}  
to {  
    left: 323px;  
}  
}  
 @-webkit-keyframes counter {  
 from {  
left: -25px;  
}  
to {  
    left: 323px;  
}  
}  
 @-o-keyframes counter {  
 from {  
left: -25px;  
}  
to {  
    left: 323px;  
}  
}

在這里其實有很多個CSS3的知識點，例如進度條上面的進度提示的小圖標的下方有個小三角形，這個小三角主要是通過制作一個小的正方形，然后利用 position來定位，調整好位置后，再通過transform來轉換角度，使之最終成為一個三角形。大家可以多多看看里面的一些小細節，對于學習 CSS3來說是很有幫助的。

Javascript

完成了進度條的模型，而且進度條也通過CSS3的定義開始動起來了，那我們就接下來用jQuery來完善我們的進度條，讓他成為一個不管外表還是內心都很強大的進度條。嘿嘿…在這里主要做的是讓進度條上面的數字隨著進度而發生變化，從而客觀的知道當前進度條的進度百分比，看下面的代碼：

$(function(){  
  var interval = setInterval(increment,100);  
  var current = 0;  
  function increment(){  
    current++;  
    $('#counter').html(current+'%');   
    if(current == 100) { current = 0; }  
  }  
  $('.load-bar').mouseover(function(){  
        clearInterval(interval);  
  }).mouseout(function(){  
      interval = setInterval(increment,100);  
    });  
});

這一步需要注意的是別忘了加入jQuery庫，不然就看不到效果了。

原文鏈接：http://www.jiawin.com/css3-digital-progress-bar/

責任編輯：張偉來源： Javin

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

CSS3動態進度條及jQ百分比數字顯示