卡卡網(wǎng)

前面介紹過漂亮的CSS動畫進(jìn)度條，本文更進(jìn)一步，介紹帶有文本表示（百分比）的CSS動畫進(jìn)度條，這樣的進(jìn)度條用戶體驗(yàn)會更佳。

demodownload

實(shí)例介紹

本實(shí)例是CSS+jQuery實(shí)現(xiàn)的，不過jQuery代碼很少，主要作用就是動態(tài)顯示文本百分比的數(shù)值。

jQuery代碼

$(document).ready(function () {

  function modifValues() {

    var val = $('.downloading-progress-bar').attr('data-value');
    if (val >= 100) {val = 5;}
    var newVal = val * 1 + 0.5;
    var txt = Math.floor(newVal) + '%';

    $('.downloading-progress-bar').attr('data-value', newVal);
    $('.percentage').html(txt);
    $('.downloading-progress-bar').css("width", txt);
  }

  setInterval(function () {modifValues();}, 50);

});

HTML代碼

<div class="downloader">
    <div class="downloading-progress">
      <div class="downloading-progress-bar" data-value="0" data-max="100"></div>
    </div>
    <div class="percentage"></div>
</div> 

CSS代碼

.downloader {
  width: 450px;
}

.downloading-progress {
  position: relative;
  float: left;
  width: 300px;
  height: 20px;
  background-color: rgba(0,0,0,0.15);
  padding: 5px;  
  box-sizing: border-box;
  border-radius: 10px;
}

.downloading-progress-bar {
  position: relative;
  width: 0%;
  height: 10px;
  border-radius: 8px;    
  background-color: white;
}

.percentage {
  background-color: #D9290B;
  border-radius: 15px;
  height: 20px; 
  box-sizing: border-box;
  width: 50px;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  font-size: 0.8rem;
  text-align: center;  
  float:left;
  line-height: 20px !important;
  margin: 0 0 0 10px;
}

總結(jié)

本文介紹帶有文本表示（百分比）的CSS動畫進(jìn)度條，這樣的進(jìn)度條用戶體驗(yàn)會更佳，它是用CSS+jQuery實(shí)現(xiàn)的。

您可能對以下文章也感興趣

• 3個(gè)漂亮的純CSS動畫進(jìn)度條
• 具有可拖動手柄的播放器進(jìn)度條
• 11款矩形（動畫）進(jìn)度條實(shí)例
• 7款圓角（動畫）進(jìn)度條實(shí)例
• 7款步驟進(jìn)度條實(shí)例
• 4款圓形/徑向進(jìn)度條實(shí)例
• CSS3創(chuàng)建時(shí)尚且具有動畫效果的進(jìn)度條

標(biāo)簽: 進(jìn)度條  動畫進(jìn)度條