效果图
HTML
<div class="progress-bar-box">
<div class="wrap">
<div class="box">
<div class="text">0%</div>
</div>
</div>
<div class="hint">倒计时:00:00:00</div>
</div>
CSS
.progress-bar-box {
margin:30px auto;
}
.wrap {
width:200px;
height:20px;
border-radius: 15px;
margin:60px auto 0;
background: #4e56d5;
//overflow: hidden;
}
.box {
width: 0%;
height: 20px;
border-radius: 15px;
position: relative;
background: -webkit-repeating-linear-gradient(-36deg, #aabef9 0, #aabef9 0.2rem, #7c82eb 0.2rem, #7c82eb .4rem);
-webkit-animation: move 5s linear infinite;
animation: move 5s linear infinite;
}
.text {
width:50px;
height:20px;
background:red;
position: absolute;
top: -21px;
right:-25px;
text-align: center;
color: #FFF;
background:#4e56d5;
}
.hint {
text-align: center;
color: #ffb400;
font-szie: 12px;
margin:5px auto;
}
@-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position:200px 0;
}
}
JS
countDown(60,0,60);
/*
* remainTime 剩余秒数
* miningTime 已使用秒数
* totalTime 需要倒计时的秒数
*/
function countDown (remainTime, miningTime, totalTime) {
var times = window.setInterval(function () {
var remain_time = remainTime * 1000; //剩余毫秒数
var mining_time = miningTime * 1000; //已用毫秒数
var total_time = totalTime * 1000; //总秒数
var days = parseInt(remain_time / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
var hours = parseInt(remain_time / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
var minutes = parseInt(remain_time / 1000 / 60 % 60, 10); //计算剩余的分钟
var seconds = parseInt(remain_time / 1000 % 60, 10); //计算剩余的秒数
if (remainTime >= 0) {
$('.hint').html(checkTime(hours) + ':' + checkTime(minutes) + ':' + checkTime(seconds));
$('.text').html(Math.floor((mining_time / total_time * 100) * 100) / 100+'%');
$('.box').css({'width':Math.floor((mining_time / total_time * 100) * 100) / 100+'%'});
remainTime--;
miningTime++;
} else {
$('.hint').html('倒计时结束');
clearInterval(times);
}
}, 1000);
}
function checkTime(i) {
//将0-9的数字前面加上0,例1变为01
if (i < 10) {
i = "0" + i;
}
return i;
}