Is it possible to render indeterminate progress bar with Twitter Bootstrap?
If you want a CSS-only solution, here ya go:
HTML:
<div class="progress" style="position: relative;">
<div class="progress-bar progress-bar-striped indeterminate">
</div>
CSS:
.progress-bar.indeterminate {
position: relative;
animation: progress-indeterminate 3s linear infinite;
}
@keyframes progress-indeterminate {
from { left: -25%; width: 25%; }
to { left: 100%; width: 25%;}
}
Here's a working version:
https://jsbin.com/dewikogujo/edit?html,css,output
In bootstrap 2:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="progress progress-striped active">
<div class="bar" style="width: 100%;"></div>
</div>In bootstrap 3:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
</div>
</div>In bootstrap 4:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>