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

Answer 3

Here's what I would do to get an indeterminate progress bar :

• Use a striped, animated progress bar
• Set it at 100%
• Customize the animation speed
• Add a text like "please wait" to inform the user that something is being processed
• Add ellipses (...), using the css content property
• Animate the ellipses using CSS in browsers that support this

---

Demo :

.progress {
    margin: 15px;
}

.progress .progress-bar.active {
    font-weight: 700;
    animation: progress-bar-stripes .5s linear infinite;
}

.dotdotdot:after {
    font-weight: 300;
    content: '...';
    display: inline-block;
    width: 20px;
    text-align: left;
    animation: dotdotdot 1.5s linear infinite;
}

@keyframes dotdotdot {
  0%   { content: '...'; }
  25% { content: ''; }
  50% { content: '.'; }
  75% { content: '..'; }
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
    <span>Please wait<span class="dotdotdot"></span></span>
  </div>
</div>

(see also this Fiddle)

Answer 4

Old topic.. but I had to do this today. Here's what I did.

First, I used the Bootstrap dialog class as found here.

HTML fragment

<div id="progressDiv" class="progress">
    <div class="progress-bar progress-bar-striped active" 
        role="progressbar" 
        aria-valuenow="100" 
        aria-valuemin="0" 
        aria-valuemax="100" 
        style="width: 100%">
    </div>
</div>

JavaScript

var progress = $("#progressDiv").html();

BootstrapDialog.show(
{
    title: "Please wait...",
    message: progress
});

The resulting dialog is: (Note that the progress bar is animated)

This pops up up a modal dialog showing an animated bar.

Answer 5

I was unhappy with an animated, striped progress bar at 100%, so I wrote some CSS. Just add the class jkoop-progress-bar-indeterminate to your <div class="progress-bar .... That's it.

Tested with Bootstrap v4.5

.progress .jkoop-progress-bar-indeterminate.progress-bar-animated {
  animation: indeterminate 1s linear infinite alternate, progress-bar-stripes 1s linear infinite;
  width: 25% !important;
}

.progress .jkoop-progress-bar-indeterminate {
  animation: indeterminate 1s linear infinite alternate;
  width: 25% !important;
}

@keyframes indeterminate {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 75%;
  }
}

<html>

<head>
  <title>Indeterminate Progress Bar</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
</head>

<body style="margin: 20px;">
  <h1>Indeterminate Progress Bar</h1>

  <div class="progress">
    <div class="jkoop-progress-bar-indeterminate progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
  </div>

  <p style="color:#888;text-align:right">Bootstrap v4.5.2</p>
</body>

</html>

Answer 6

It's not pretty, but it gets the job done:

HTML:

<div class="progress" style="position: relative;">
    <div class="progress-bar progress-bar-striped active" style="position: relative; left: -180px; width: 180px">
</div>

Javascript:

setInterval(function() {
    var progress_width = $('.progress').width();
    var $progress_bar = $('.progress-bar');

    $progress_bar.css('left', '+=3');

    var progress_bar_left = parseFloat($progress_bar.css('left')+'');
    if (progress_bar_left >= progress_width)
        $progress_bar.css('left', '-200px');
}, 20);

Feel free to optimize your jQuery selectors a bit ;-)

Here's a working version:

https://jsbin.com/copejaludu/edit?html,js,output