<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>进度条</title>
<script type="text/javascript" src="https://staging.quncrm.com/build/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
function longer() {
var time = new Date();
var cur = time.getSeconds() == 0 ? 60 : time.getSeconds();
var val = parseInt(cur / 60 * 100);
$('.progress').css('width', val + '%');
$('.progressVal').text(val + '%');
}
setInterval(longer, 1000);
})
</script>
<style type="text/css">
#bg {
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
width: 800px;
}
#bg li:nth-child(1) {
margin: 0px;
background: #fff;
height: 5px;
width: 800px;
border-radius: 3px;
border-left: 1px solid #111;
border-top: 1px solid #111;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
.progress {
position: absolute;
width: 100%;
height: 1px;
margin: 2px 0;
background: #2187e7;
box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.4);
-moz-transition: width 1s ease-out;
-webkit-transition: width 1s ease-out;
}
.progressVal {
display: block;
margin: 0 auto;
color: #2187e7;
width: 50px;
height: 20px;
line-height: 20px;
text-align: center;
}
</style>
</head>
<body>
<ul id="bg">
<li><span class="progress"></span></li>
<li><span class="progressVal"></span></li>
</ul>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-1309786.html
