Search code examples
csstwitter-bootstraptwitter-bootstrap-3css-selectorstwitter-bootstrap-2

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

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:

progress bar

Solution

  • 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>