<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="progress-bar-outer" style="background: #dceeef;"> <div class="progress-inner"> <div class="progress" style="background: #00b7f9;"> <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div> </div> <div class="progress-value">80%</div> </div> </div> <div class="progress-bar-outer" style="background: #e0e8d8;"> <div class="progress-inner"> <div class="progress" style="background: #92c26a;"> <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 65%;"></div> </div> <div class="progress-value">65%</div> </div> </div> </div> </div> </div>

.progress-bar-outer{ margin-bottom: 20px; border-radius: 30px; padding: 20px; border: 1px solid rgba(50, 50, 50, 0.10); } .progress-bar-outer:last-child{ margin-bottom: 0; } .progress-bar-outer .progress-inner{ background: #e2eef4; border-radius: 20px; padding: 25px; box-shadow: inset 0 0 3px 3px rgba(50, 50, 50, 0.20); position: relative; } .progress-bar-outer .progress{ height: 27px; margin: 0; padding: 4px 0; border-radius: 10px; position: relative; } .progress-bar-outer .progress-bar{ box-shadow: none; background: transparent; animation: progress 4s; } .progress-bar-outer .progress:before{ content: "\f111"; font-family: fontawesome; position: absolute; top: 4px; color: #fff; } .progress-bar-outer .progress-value{ position: absolute; top: 27px; left: 48%; font-size: 18px; font-weight: bold; letter-spacing: 2px; color: #fff; } @-webkit-keyframes progress{ 0% { width: 0%;} } @keyframes progress{ 0% { width:0%; } }