<!--html代码-->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="progressBox">
<div class="progress" style="display:block;">
<div class="progress-bar" style="width:40%;">
<span id="bbb">40%</span>
</div>
</div>
</div>
</body>
</html>
/*css代码*/
.progressBox {
width:80%;
height:100%;
overflow: visible;
}
.progress {
height: 30px;
padding: 6px;
display:none;
margin-top:20px;
background: #809495;
position: relative;
overflow: visible;
border-radius: 30px;
}
.progress .progress-bar{
height:30px;
z-index: 2;
position: relative;
background:#f0ad4e;
border-radius:30px;
animation: animate-positive 4s;
}
.progress .progress-bar span {
position: absolute;
top: -15px;
right:-40px;
color: #fff;
width: 60px;
height: 60px;
display: block;
font-size: 17px;
font-weight: bold;
background: #f0ad4e;
line-height: 60px;
text-align: center;
border-radius: 100%;
}
@-webkit-keyframes animate-positive {
0% { width: 0%;}
}
@keyframes animate-positive {
0% { width:0%; }
}