h5加载进度条
作者:互联网
html代码
<div id="plan">
<p id="planning">进度:0%</p>
<progress id="proceed" max="100" value="0"></progress>
</div>
使用progress标签,设置好min和max数值。可以用value获取其中的进度值
js代码
function plan() {
var proceed = document.getElementById('proceed')
var planning = document.getElementById('planning')
var timer = setInterval(function () {
if (proceed.value !== 100) {
proceed.value++
planning.innerHTML = '进度:' + proceed.value + '%'
} else {
planning.innerHTML = '加载完成'
clearInterval(timer)
}
}, 100)
}
plan()
效果如下
使用div模仿进度条
html代码
<!--外层容器-->
<div id="wrapper">
<!--进度条容器-->
<div id="progressbar">
<!--用来模仿进度条推进效果的进度条元素-->
<div id="fill"></div>
</div>
</div>
css代码
#wrapper {
position: relative;
width: 200px;
height: 100px;
border: 1px solid darkgray;
}
#progressbar {
position: absolute;
top: 50%;
left: 50%;
margin-left: -90px;
margin-top: -10px;
width: 180px;
height: 20px;
border: 1px solid darkgray;
}
/*在进度条元素上调用动画*/
#fill {
animation: move 12s;
text-align: center;
background-color: #6caf00;
}
/*实现元素宽度的过渡动画效果*/
@keyframes move {
0% {
width: 0;
}
100% {
width: 100%;
}
}
js代码
var progressbar = {
init: function () {
var fill = document.getElementById('fill');
var count = 0;
//通过间隔定时器实现百分比文字效果,通过计算CSS动画持续时间进行间隔设置
var timer = setInterval(function (e) {
count++;
fill.innerHTML = count + '%';
if (count === 100) clearInterval(timer);
}, 100);
}
};
progressbar.init();
效果图
注意这里计时器的间隔要和css动画的执行时间要相对应
标签:proceed,进度条,timer,h5,width,planning,var,100,加载 来源: https://blog.csdn.net/weixin_42870180/article/details/89235664