Is it possible to render indeterminate progress bar with Twitter Bootstrap?

Question

Is it possible to render indeterminate progress bar with Twitter Bootstrap (either v2 or v3) using either some build-in functionality or 3rd party plugin? I trued to google for it, but with no luck.

Example of I want to achieve:

Answer 1

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>

Answer 2

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