网页|利用progress实现进度条效果
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> |
|---|
腾讯云开发者
