<progress></progress>标签怎么做带百分比的进度条
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了<progress></progress>标签怎么做带百分比的进度条相关的知识，希望对你有一定的参考价值。
参考技术A 使用progressborder:*; background:*;可以控制所有浏览器下progress元素的边框和背景色。其中，Chrome浏览器是个特例，直接的设置看不到效果（实际上支持），原因下面会解释。FireFox浏览器已经完成的进度条，使用progress::-moz-progress-bar 表示，这与Chrome浏览器是相反的。
Chrome浏览器Chrome的表现与FireFox有着明显的差异，其progress元素的结构似乎是这样的：
progress┓ progress-value progress-bar
其中，progress-bar指全部的进度，progress-value指已经完成的进度。因此，Chrome浏览器下，已经完成的进度条，使用progress::-webkit-progress-value 表示， FireFox浏览器下是*-bar. 而progress-bar默认含有背景色，因此，我们需要如下设置，以自定义背景色：progress::-webkit-progress-bar background: *; 这也很好地解释了上面的一个疑问？progressbackground:*；为什么不能让progress元素背景色改变呢？不是不能改变，而是被progress-bar这个内部元素给覆盖了，当我们设置：progress::-webkit-progress-bar background: transparent; 的时候，progressbackground:*；设置的背景色就会显露出来。本回答被提问者采纳
JS框架_(Progress.js)圆形动画进度条
百度云盘 传送门 密码: 6mcf
圆形动画进度条效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> p { position: fixed; top: 50%; left: 0; right: 0; text-align: center; transform: translateY(-50%); font-size: 40px; font-weight: 900; color:#6495ED; text-shadow: 0 0 50px black; text-transform: capitalize; font-family: \'Roboto\',\'Helvetica\',\'Arial\',sans-serif; letter-spacing: 5px; } </style> <body> <p>Gary</p> <canvas id="my_html" width="300" height="300"></canvas> <canvas id="css" width="300" height="300"></canvas> <script src="js/progress.js"></script> <script> var p1 = new Progress({ el:\'my_html\',//canvas元素id deg:30,//绘制角度 timer:10,//绘制时间 lineWidth:20,//线宽 lineBgColor:\'#e2e2e2\',//底圆颜色 lineColor:\'#e4393c\',//动态圆颜色 textColor:\'#000\',//文本颜色 fontSize:50,//字体大小 circleRadius:100//圆半径 }); var p2 = new Progress({ el:\'css\',//canvas元素id deg:75,//绘制角度 timer:30,//绘制时间 lineWidth:20,//线宽 lineBgColor:\'#e2e2e2\',//底圆颜色 lineColor:\'#e4393c\',//动态圆颜色 textColor:\'#000\',//文本颜色 fontSize:40,//字体大小 circleRadius:100//圆半径 }); </script> </body> </html>
实现过程
progress.js加载圆形进度条
ProgressJs 是个 JavaScript 和 CSS3 库,用来创建网页上每个对象的管理进度条。(可以自定义进度条模板)
开源项目：传送门
Progress 对象属性
labels ：返回进度条的标记列表
max ：设置或返回进度条的 max 属性值
position： 返回进度条的当前位置
value ：设置或返回进度条的 value 属性值。labels 返回进度条的标记列表
<script src="js/progress.js"></script> <script> var p1 = new Progress({ el:\'my_html\',//canvas元素id deg:30,//绘制角度 timer:10,//绘制时间 lineWidth:20,//线宽 lineBgColor:\'#e2e2e2\',//底圆颜色 lineColor:\'#e4393c\',//动态圆颜色 textColor:\'#000\',//文本颜色 fontSize:50,//字体大小 circleRadius:100//圆半径 }); var p2 = new Progress({ el:\'css\',//canvas元素id deg:75,//绘制角度 timer:100,//绘制时间 lineWidth:20,//线宽 lineBgColor:\'#e2e2e2\',//底圆颜色 lineColor:\'#e4393c\',//动态圆颜色 textColor:\'#000\',//文本颜色 fontSize:40,//字体大小 circleRadius:100//圆半径 }); </script>
以上是关于<progress></progress>标签怎么做带百分比的进度条的主要内容，如果未能解决你的问题，请参考以下文章