带有文本表示（百分比）的CSS动画进度条

前面介绍过漂亮的CSS动画进度条，本文更进一步，介绍带有文本表示（百分比）的CSS动画进度条，这样的进度条用户体验会更佳。

demodownload

实例介绍

本实例是CSS+jQuery实现的，不过jQuery代码很少，主要作用就是动态显示文本百分比的数值。

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

总结

本文介绍带有文本表示（百分比）的CSS动画进度条，这样的进度条用户体验会更佳，它是用CSS+jQuery实现的。

您可能对以下文章也感兴趣

• 3个漂亮的纯CSS动画进度条
• 具有可拖动手柄的播放器进度条
• 11款矩形（动画）进度条实例
• 7款圆角（动画）进度条实例
• 7款步骤进度条实例
• 4款圆形/径向进度条实例
• CSS3创建时尚且具有动画效果的进度条