"Customized Progressbar"
Bootstrap 3.0.0 Snippet by BlueCircle

<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"> <h2>Progress Bar</h2> <div class="progress-outer"> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped active" style="width:80%;"></div> <div class="progress-value">80%</div> </div> </div> </div> </div>
h2{ margin-bottom: 10px;} .progress-outer{ background: #282828; padding: 70px 100px; margin: 50px 0; box-shadow: 0 0 10px rgba(209, 219, 231,0.7); } .progress{ position: relative; height: 20px; margin: 0; overflow: visible; background: #424242; } .progress .progress-bar{ border-radius: 2px; } .progress-bar-striped { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem; background-color: #437abd; } .progress .progress-value{ left: 90%; position: absolute; font-size: 14px; font-weight: bold; color: #e5e5e5; letter-spacing: 5px; } .progress-bar.active{ animation: reverse progress-bar-stripes 1s linear infinite, animate-positive 2s; } @-webkit-keyframes animate-positive{ 0% { width: 0%; } } @keyframes animate-positive { 0% { width: 0%; } }

Related: See More


Questions / Comments: