css+jq实现进度条展示
2022-10-29 本文已影响0人
清风昙
css+jq实现进度条展示，效果如下：
9.png
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.title{
width: 100%;
line-height: 50px;
background-color: #2F98EA;
color: #ffffff;
text-align: center;
}
.content{
width: 100%;
background: #F9F9F9;
padding: 15px;
}
.progress{
display: flex;
align-items: center;
}
.progress-l{
width: 100%;
height: 6px;
background-color: rgba(172, 152, 141, 0.3);
border-radius: 4px;
}
.progress-bac{
height: 100%;
background-color: rgba(47, 152, 234, 1);
border-radius: 4px;
display: block;
-moz-transition: width 0.5s;
-webkit-transition: width 0.5s;
transition: width 0.5s;
}
.progress-r{
color: rgba(52, 52, 52, 1);
font-size: 14px;
font-family: SFPro-Medium;
font-weight: 550;
line-height: 16px;
margin-left: 9px;
}
</style>
</head>
<body>
<div class="title">进度条展示</div>
<div class="content">
<div class="progress">
<div class="progress-l">
<span id="progress0" class="progress-bac"></span>
</div>
<div class="progress-r">
<span id="progress-percent">30</span>%
</div>
</div>
<div class="progress">
<div class="progress-l">
<span id="progress1" class="progress-bac"></span>
</div>
<div class="progress-r">
<span id="progress-percent">50</span>%
</div>
</div>
<div class="progress">
<div class="progress-l">
<span id="progress2" class="progress-bac"></span>
</div>
<div class="progress-r">
<span id="progress-percent">80</span>%
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
// index:列表下标值，value：进度条值，name：进度条所在id
function progress(index, value, name){
if ( value ){
var num = "";
var loader_progress = setInterval(function(){
num++;
$(name + index ).css({'width' : num + '%'});
if ( num == value ){
clearInterval(loader_progress);
}
},10);
}
};
// 初始化进度条
$('.progress #progress-percent').each(function (index, element) {
let percent = $(".progress #progress-percent").eq(index).html()
progress(index, percent, '#progress')
})
</script>
</body>
</html>
