HTML5 new label-progress bar label, you can use the progress bar when needed to let users understand the current status and improve satisfaction, and more and more fun progress bars will be provided in the future!
This article is a progress bar that only uses pure native DOM. Of course, if you introduce Jquery into your project, you can also use Jquery to implement it. Below is the code.
html part
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Progress</title>
</head>
<body>
<div style="position: relative">
<progress value="0" max="100" id="pro"></progress>
<span id="sp" style="color: orangered"></span>
</div>
</body>
</html>
js part:
let proObj = document.getElementById('pro')
const myTimer = setInterval(() => {
if (proObj.value < 100) {
proObj.value += 1
const spanobj = document.getElementById("sp")
spanobj.innerHTML = proObj.value + '%'
// 参数3为 width/ max的值，这样就可以让百分比数字跟随进度条移动了
spanobj.style.left = proObj.value * 3 + "px"
} else {
alert('进度100%，下载完成！') // 在完成后可进行后续操作
clearInterval(myTimer)
}
}, 100)
css style part:
progress {
width: 300px;
height: 30px;
color: #f00;
background: #EFEFF4;
border-radius: 0.5rem;
position: absolute;
left: 0;
top: 0;
}
/* 1表示总长度背景色 */
progress::-webkit-progress-bar {
background-color: #f2f2f2;
border-radius: 0.5rem;
}
/* 2表示已完成进度背景色 */
progress::-webkit-progress-value {
background: lawngreen;
/*background-image: linear-gradient(to right, green , lawngreen);*/
border-radius: 0.5rem;
}
#sp {
position: absolute;
left: 0;
top: 0;
line-height: 30px;
}
Realized renderings:
