JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
<h4>Standard bootstrap progress bar</h4>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> </div>
</div>
<h4>Animated progress bar</h4>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> </div>
</div>
</div>
CSS
@keyframes progress {
from { background-position: 0px; }
to { background-position: 40px; }
}
.progress-bar-animated {
animation: progress 1s linear infinite;
}
/* chrome */
@-webkit-keyframes progress {
from { background-position: 0px; }
to { background-position: 40px; }
}
.progress-bar-animated {
-webkit-animation: progress 1s linear infinite;
}