<style>
.progress{
height: 20px;
background: #ebebeb;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-radius: 10px;
.progress .blue{
background: #5aaadb;
border-color: #5aaadb;
position: relative;
float: left;
margin: 0 -1px;
min-width: 30px;
height: 20px;
line-height: 18px;
text-align: right;
background-image: linear-gradient(to bottom, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 10px;
}
.blue span{
padding:0 10px;
}
</style>
<div class="progress">
<span class="blue" style="width: 50%;">
<span>50%</span>
</span>
</div>
.progress{
height: 20px;
background: #ebebeb;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-radius: 10px;
width:500px;
overflow:hidden;
over
.progress .blue{
background: #5aaadb;
border-color: #5aaadb;
position: relative;
float: left;
margin: 0 -1px;
min-width: 30px;
height: 20px;
line-height: 18px;
text-align: right;
background-image: linear-gradient(to bottom, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 10px;
}
.blue span{
padding:0 10px;
}
</style>
<div class="progress">
<span class="blue" style="width: 50%;">
<span>50%</span>
</span>
</div>