技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

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

作者:admin    时间:2021-10-28 13:8:2    浏览:

前面介绍过漂亮的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实现的。

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

 

标签: 进度条  动画进度条  
  • IT热文
  • 站长推荐