效果演示

<style type="text/css">
.progress_bar .pro-bar {
background: hsl(0, 0%, 97%);
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.1) inset;
height:4px;
margin-bottom: 12px;
margin-top: 50px;
position: relative;
}
.progress_bar .progress_bar_title{
color: #333;
font-size: 15px;
font-weight: 300;
position: relative;
top: -34px;
z-index: 1;
}
.progress_bar .progress_number{
float: right;
margin-top: -34px;
}
.progress_bar .progress-bar-inner {
background-color: hsl(0, 0%, 88%);
display: block;
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: width 1s linear 0s;
animation: animate-positive 2s;
}
.progress_bar .progress-bar-inner:before {
content: "";
background-color: hsl(0, 0%, 100%);
border-radius: 50%;
width: 4px;
height: 4px;
position: absolute;
right: 1px;
top: 0;
z-index: 1;
}
.progress_bar .progress-bar-inner:after {
content: "";
width: 14px;
height: 14px;
background-color: inherit;
border-radius: 50%;
position: absolute;
right: -4px;
top: -5px;
}
@-webkit-keyframes animate-positive{
0% { width: 0%; }
}
@keyframes animate-positive{
0% { width: 0%; }
}
</style>

<div class="progress_bar">
<div class="pro-bar">

洪荒之力使用值
<span class="progress_number">89.9%</span>

<span class="progress-bar-inner" style="background-color: rgba(255, 124, 89, 0.52); width: 89.9%;" data-value="89.9" data-percentage-value="89.9"></span>
</div>
</div>

html

<div class="progress_bar">
<div class="pro-bar">
<small class="progress_bar_title">
洪荒之力使用值
<span class="progress_number">99-99-99 100%</span>
</small>
<span class="progress-bar-inner" style="background-color: rgba(32, 132, 118, 0.68); width: 100%;" data-value="100" data-percentage-value="100"></span>
</div>
</div>

CSS

.progress_bar .pro-bar {
background: hsl(0, 0%, 97%);
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.1) inset;
height:4px;
margin-bottom: 12px;
margin-top: 50px;
position: relative;
}
.progress_bar .progress_bar_title{
color: #333;
font-size: 15px;
font-weight: 300;
position: relative;
top: -34px;
z-index: 1;
}
.progress_bar .progress_number{
float: right;
margin-top: -34px;
}
.progress_bar .progress-bar-inner {
background-color: hsl(0, 0%, 88%);
display: block;
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: width 1s linear 0s;
animation: animate-positive 2s;
}
.progress_bar .progress-bar-inner:before {
content: "";
background-color: hsl(0, 0%, 100%);
border-radius: 50%;
width: 4px;
height: 4px;
position: absolute;
right: 1px;
top: 0;
z-index: 1;
}
.progress_bar .progress-bar-inner:after {
content: "";
width: 14px;
height: 14px;
background-color: inherit;
border-radius: 50%;
position: absolute;
right: -4px;
top: -5px;
}
@-webkit-keyframes animate-positive{
0% { width: 0%; }
}
@keyframes animate-positive{
0% { width: 0%; }
}

<div class="post-tips-warning2">
<div class="alert" role="alert">原文出自 三秋《博客计划页源码》,我只是一名快乐的搬运工! (●′ω`●)</div></div>