本文实例为大家分享了JS实现进度条动态加载的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>进度条& lt;/title>
& lt;脚本src=" http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js "祝辞& lt;/script>
& lt;风格类型=" text/css "比;
.container {
宽度:480 px;
保证金:50 px;
}
.progressBar {
显示:inline-block;
宽度:81%;
高度:22 px;
background - color: rgba (0, 0, 0, 0.4);
-webkit-border-radius: 3 px;
-moz-border-radius: 3 px;
border - radius: 3 px;
margin-right: 3%;
}
# progressFill {
宽度:0%;
高度:22 px;
位置:相对;
background - color: # 40 a4c2;
border - radius: 3 px;
-webkit-border-radius: 3 px;
-moz-border-radius: 3 px;
background-size: 3 em em;
背景图片:线性渐变(-45度,透明的0 em、透明0.8 em, # 57 d1f7 0.9 em, # 57 d1f7 2.1 em,透明2.1 em,透明2.9 em, # 57 d1f7 3.1 em);
-webkit-animation: warning-animation 750 ms无限线性;
-moz-animation: warning-animation 750 ms无限线性;
动画:warning-animation 750 ms无限线性;
}
# progressFill:{之前
内容:”;
位置:绝对的;
上图:0;
左:0;
右:0;
底部:0;
高度:100%;
border - radius: 3 px;
-webkit-border-radius: 3 px;
-moz-border-radius: 3 px;
背景图片:线性渐变(底部,40 # a4c2 rgbA(37岁,117、188、0.8)15%,60%透明,# 40 a4c2);
}
@-moz-keyframes warning-animation {
0% {
背景位置:0 0;
}
100% {
背景位置:3 em 0;
}
}
@-webkit-keyframes warning-animation {
0% {
背景位置:0 0;
}
100% {
背景位置:3 em 0;
}
}
@-ms-keyframes warning-animation {
0% {
背景位置:0 0;
}
100% {
背景位置:3 em 0;
}
}
@-o-keyframes warning-animation {
0% {
背景位置:0 0;
}
100% {
背景位置:3 em 0;
}
}
@keyframes warning-animation {
0% {
背景位置:0 0;
}
100% {
背景位置:3 em 0;
}
}
.progressText #{百分比
显示:inline-block;
margin-top: -11 px;
vertical-align:中间;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt;按钮id="开始"祝辞点击开始& lt;/button>
& lt; div类="容器"比;
& lt;跨类=皃rogressBar”比;
& lt; div id=" progressFill "祝辞& lt;/div>
& lt;/span>
& lt;跨类=皃rogressText”比;进度& lt;/span>
& lt;跨度id=鞍俜直取痹?% & lt;/span>
& lt;/div>
& lt;/body>
& lt; script>
$(" #开始”)。(“点击”,函数(){
$ (" # progressFill ") .animate ({
宽度:“100%”
},10 * 1000);
var计算=0;
var计时器=setInterval(函数(){
数+ +;
var percentageValue=https://www.yisu.com/zixun/count +‘%’
$(" #百分比”). html (percentageValue);
如果(计数祝辞=100)clearInterval(计时器);
},99)
}）
& lt;/script>
& lt;/html>
进度条动态加载效果图如下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
