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:

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

Solution 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

Solution 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)

Solution 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.

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

View more solutions

Comments

[Will Eddins]

While an old answer, this is the top result when doing a google search for this, and this doesn't answer the question. The answer provides a normal progress bar, while the question asks for an indeterminate progress bar. Indeterminate progress bars have no known progress to display: en.wikipedia.org/wiki/Progress_bar

[Cody]

Did you bother trying the code I provided? jsfiddle.net/CodyRank/pJ476 It's pretty much a textbook example of an indeterminate progress bar. See also: goo.gl/iZRSzZ

[Will Eddins]

I'll take back the downvote - I guess as long as it doesn't move from 100%, it looks close enough. I was expecting something more along the lines of a moving bar that wasn't just an animated 100%, but it looks like the mac indeterminate is exactly that. Windows tends to be the moving section. Sorry for ever doubting you!

[snerd]

this answer combined with Bootbox.js (bootboxjs.com) is what finally worked for me. t/y!

[Carlo G]

I used this answer with blockUI, worked like a charm

[tale852150]

how do you render this based on submitting some processing and remove it after processing is completed?

[John Slegers]

@tale852150 : You just need to set the width of your progress bar at several steps of your processing. See Bootstrap progress bar progression for a basic demo.

[tale852150]

@JohnSlegers Appreciate the feedback. But this is an indeterminant progress bar. I need it to stop and show "Process Completed" (or go away completely) when my processing has completed. There is no progression per se involved. Or maybe I am just misunderstanding your feedback. :-)

[John Slegers]

@tale852150 : It's the same basic principle : you change your CSS based on the status of your process. If your process has only two statuses (eg. "in progress" & "completed"), just put a progress bar & a completion message at the same spot in your HTML code. Then, hide your completion message (display : none) while your process has status "in progress" and hide your progress bar while the status is "completed". This is also demonstrated by the same demo I referenced in my previous comment! ➡ Wait until the progress bar hits 100% to see the effect!

[Ortund]

Neither of these worked for me. The first snippet gave me an empty progress bar, the second gave me a full one... neither animates in any way

[Ortund]

Not really... a new question would be more appropriate but I eventually got it working so no stress

[Cody]

I added code for how to do this in bootstrap 4, since this answer is pretty old

[romaricdrigon]

This is the best answer in my opinion, as it emulates the traditional Windows "marquee" bar. With a small HTML change, it works with Bootstrap 3 too: <div class="progress progress-striped"> <div class="progress-bar indeterminate" role="progressbar" style="width: 100%"></div> </div>

[beerwin]

This should be the accepted answer as it works out of the box with a Bootstrap progress bar. Also, the animation can be replaced with a more sophisticated one sould anybody want it.

[Samuel Martins]

You are a legend!