1 进度条的运用
在加载网页时，如在打开谷歌、百度时，当网速较低时浏览器地址栏的下方就会出现蓝色的进度条，而不是在地址栏里面出现进度条。通过进度条可以让用户比较准确判断网页加载的进度，决定是否继续加载。但是现在运用最多的应该是文件下载的时候（如视频文件、音频文件等），用来显示下载进度。
2 progress简单介绍
在HTML中，Progress标签是HTML5中新增的标签，是使用来定义运行中的任务进度或进程的，通常和JavaScript一起使用来实现进度条。Progress标签属性为max和value。（max：规定需要完成的值；value：规定进程的当前值）。
3 制作步骤
在利用bootstrap制作的过程中，先设置一个 <div>作为进度槽。然后在设置一个<div>作为进度条。
（1）制作默认的静态进度条，（ style="width:30%"; 表示进度条在 30% 的位置）。
<div>
<div role="progressbar" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
<span>30% </span>
</div>
注意：role="progressbar"属性作用：告诉搜索引擎这个div的作用是进度条。aria-valuenow="30"属性作用：当前进度条的进度为30%。aria-valuemin="0"属性作用：进度条的最小值为0%。aria-valuemax="100"属性作用：进度条的最大值为100%。bootstrap里的sr-only全称是 screen reader only，是屏幕阅读器，主要用于增强可访问性。默认的进度条颜色是蓝色，在bootstrap中，还有success（绿色）、info（蓝色）、warning（黄色）、danger（红色）表达不同意义的颜色样式。如下就是默认颜色和success（绿色）效果：
图3.1 效果图
（2）制作条纹的进度条，这里使用progress-striped添加条纹。此外还可以添加active，为进度条添加动画效果。
<h1>条纹进度条：</h1>
<div class="progress progress-striped" style="width: 400px;">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
style="width: 40%;">
<span>40%</span>
</div>
</div>
<h1>动态条纹进度条：</h1>
<div class="progress progress-striped active" style="width: 400px;">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
style="width: 40%;">
<span>40% </span>
</div>
</div>
效果图：
图3.1 效果图
此外还可以利用HTML+css的形式制作静态进度条，如果需要设置动态的效果只需要添加keyframes设置移动范围，在利用JavaScript就可以了。代码如下：
/*<!--关键html-->*/
<h1>进度条</h1>
<div id="container">
<div id="shuzhi">
<div id="fill"></div>
</div>
</div>
/*<!--关键css-->*/
@keyframes move {
0%{
width:0;
}
60%{
width:60%;
}
}
</style>
<!--关键js-->
<script type="text/javascript">
var shuzhi={
init:function(){
var fill=document.getElementById('fill');
var count=0;
//设置定位器
var timer=setInterval(function(e){
count++;
fill.innerHTML=count+'%';
//清除定位器
if(count===60) clearInterval(timer);
},60); }
};
shuzhi.init();
</script>
END编 辑 | 王楠岚
责 编 | 刘 连
where2go 团队
微信号：算法与编程之美
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
