CSS樣式表

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

 
 
 
 

  
  
  
  
.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的朋友，相信大多數(shù)人對(duì)這個(gè)屬性都比較熟悉了，在這里大概的說(shuō)明一下animation設(shè)置的參數(shù)：

設(shè)置對(duì)象所應(yīng)用的動(dòng)畫名稱：loader

設(shè)置對(duì)象動(dòng)畫的持續(xù)時(shí)間：10s

設(shè)置對(duì)象動(dòng)畫的過(guò)渡類型：linear （線性過(guò)渡，等同于貝塞爾曲線）

設(shè)置對(duì)象動(dòng)畫的循環(huán)次數(shù)：infinite （無(wú)限循環(huán)）

@keyframes loader這個(gè)標(biāo)簽屬性是用來(lái)被animation使用的，定義動(dòng)畫時(shí)，簡(jiǎn)單的動(dòng)畫可以直接使用關(guān)鍵字from和to，即從一種狀態(tài)過(guò)渡到另一種狀態(tài)：

 
 
 
 

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

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

 
 
 
 

  
  
  
  
* { 
  
  
  
  
    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; 
  
  
  
  
} 
  
  
  
  
}
 
 
 
 

在這里其實(shí)有很多個(gè)CSS3的知識(shí)點(diǎn)，例如進(jìn)度條上面的進(jìn)度提示的小圖標(biāo)的下方有個(gè)小三角形，這個(gè)小三角主要是通過(guò)制作一個(gè)小的正方形，然后利用 position來(lái)定位，調(diào)整好位置后，再通過(guò)transform來(lái)轉(zhuǎn)換角度，使之最終成為一個(gè)三角形。大家可以多多看看里面的一些小細(xì)節(jié)，對(duì)于學(xué)習(xí) CSS3來(lái)說(shuō)是很有幫助的。

Javascript

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

 
 
 
 

  
  
  
  
$(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庫(kù)，不然就看不到效果了。