<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%; }
}
