倒计时进度条动态效果

效果图

HTML

<div class="progress-bar-box">
	<div class="wrap">
		<div class="box">
			<div class="text">0%div>
		div>
	div>
	<div class="hint">倒计时：00:00:00div>
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;
}