Bootstrap progress bar loading does not function properly

Question

Bootstrap progress bar loading does not function properly

I have a progress bar on my page with three parts: progress-bar-success, progress-bar-warning, and progress-bar-danger. I would like each part of the progress bar to complete sequentially, starting with progress-bar-success, then progress-bar-warning, and finally progress-bar-danger.

I am having trouble identifying what is causing the incorrect behavior in my code.

You can find my code here: JSFIDDLE

Any suggestions on how I can resolve this issue?

EDIT:

I would like the style of each progress bar to be similar to this example: bootply

jquery html css twitter-bootstrap-3

Answer 1

Answer №1

These are the key issues in your initial code:

The width of the progress bar div should be updated to show progress, not the width of the bar element.
The progress bar div is independent of the container1 div's width because it floats (you can verify this by inspecting the container in your browser and noticing its lack of height) and is designed to work in conjunction with the .progress class.

Below is a corrected version of your code for reference: http://jsfiddle.net/436Qz/30/

HTML:

<div class="person-info col-xs-12 col-sm-8">
     <div class="progress progress-striped active">
         <div id="1" class="progress-bar progress-bar-success" role="progressbar"  aria-valuemin="0" aria-valuemax="100">
             <span class="sr-only">33.33% Complete (success)</span>
         </div>
     </div>
     <div class="progress progress-striped active">
         <div id="2" class="progress-bar progress-bar-warning" role="progressbar" aria-valuemin="0" aria-valuemax="100">
             <span class="sr-only">33.33% Complete (warning)</span>
         </div>
     </div>
     <div class="progress progress-striped active">
         <div id="3" class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100">
             <span class="sr-only">33.33% Complete (danger)</span>
         </div>
     </div>
</div>

JS:

$(document).ready(function(){
    var $bar = $('.progress-bar#1');
    var progress = setInterval(function() {
        if ($bar.width()<260) {
            $bar.width($bar.width() + 26);
        }
        $bar.text(Math.floor($bar.width() / 2.6) + "%");
        if ($bar.width()>=260) {
            $bar.parent().removeClass("active");
            if ($bar.is("#3")) {
                return clearInterval(progress);
            }
            $bar = $bar.parent().next().children(".progress-bar");
        }
    }, 520);
});

CSS:

.person-info {
    margin-top: 40px;
    padding-left: 0px !important;
    padding-right: 0px !important;

}
.progress{
    width: 260px;
}

Answer 2

These are the key issues in your initial code:

The width of the progress bar div should be updated to show progress, not the width of the bar element.
The progress bar div is independent of the container1 div's width because it floats (you can verify this by inspecting the container in your browser and noticing its lack of height) and is designed to work in conjunction with the .progress class.

Below is a corrected version of your code for reference: http://jsfiddle.net/436Qz/30/

HTML:

<div class="person-info col-xs-12 col-sm-8">
     <div class="progress progress-striped active">
         <div id="1" class="progress-bar progress-bar-success" role="progressbar"  aria-valuemin="0" aria-valuemax="100">
             <span class="sr-only">33.33% Complete (success)</span>
         </div>
     </div>
     <div class="progress progress-striped active">
         <div id="2" class="progress-bar progress-bar-warning" role="progressbar" aria-valuemin="0" aria-valuemax="100">
             <span class="sr-only">33.33% Complete (warning)</span>
         </div>
     </div>
     <div class="progress progress-striped active">
         <div id="3" class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100">
             <span class="sr-only">33.33% Complete (danger)</span>
         </div>
     </div>
</div>

JS:

$(document).ready(function(){
    var $bar = $('.progress-bar#1');
    var progress = setInterval(function() {
        if ($bar.width()<260) {
            $bar.width($bar.width() + 26);
        }
        $bar.text(Math.floor($bar.width() / 2.6) + "%");
        if ($bar.width()>=260) {
            $bar.parent().removeClass("active");
            if ($bar.is("#3")) {
                return clearInterval(progress);
            }
            $bar = $bar.parent().next().children(".progress-bar");
        }
    }, 520);
});

CSS:

.person-info {
    margin-top: 40px;
    padding-left: 0px !important;
    padding-right: 0px !important;

}
.progress{
    width: 260px;
}

Answer 3

Answer №2

If you're interested in implementing a stacked progress bar, feel free to check out my example here: http://jsfiddle.net/436Qz/25/

HTML Code:

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 0%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 0%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 0%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

JavaScript Code:

$(document).ready(function(){

    var progress = setInterval(function() {
        var $successBar = $('.progress-bar-success');
        var $warningBar = $('.progress-bar-warning');
        var $dangerBar = $('.progress-bar-danger');

        if($successBar.width() < 160) {
            $successBar.width($successBar.width()+20);
        } else {
            if($warningBar.width() < 160) {
                $warningBar.width($warningBar.width()+20);
            } else {
                if($dangerBar.width() < 160) {
                    $dangerBar.width($dangerBar.width()+20);
                } else {
                    $dangerBar.width(160);
                }
            }
        }
    }, 100);
});

Answer 4

If you're interested in implementing a stacked progress bar, feel free to check out my example here: http://jsfiddle.net/436Qz/25/

HTML Code:

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 0%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 0%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 0%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

JavaScript Code:

$(document).ready(function(){

    var progress = setInterval(function() {
        var $successBar = $('.progress-bar-success');
        var $warningBar = $('.progress-bar-warning');
        var $dangerBar = $('.progress-bar-danger');

        if($successBar.width() < 160) {
            $successBar.width($successBar.width()+20);
        } else {
            if($warningBar.width() < 160) {
                $warningBar.width($warningBar.width()+20);
            } else {
                if($dangerBar.width() < 160) {
                    $dangerBar.width($dangerBar.width()+20);
                } else {
                    $dangerBar.width(160);
                }
            }
        }
    }, 100);
});

Bootstrap progress bar loading does not function properly

Answer №1

Answer №2

Similar questions

Updating the text of an element will occur only when the specified condition has been met

Firefox does not support jQuery AJAX functionality, unlike Internet Explorer where it works smoothly

The HR tag does not display anything following the mailing

Using an ajax call to dynamically generate an array for jquery autocomplete feature

Creating a tooltip with a left arrow and a bordered design

Prevent a div from sliding up when a certain element is in view

Error in TypeScript while running the command "tsd install jquery" - the identifier "document" could not be found

What do we need to ensure that the ajax server response is executed as intended in the jQuery ajax post function?

Tips on changing the outline color by clicking

To display the user's input value in the console log upon clicking

Combining various fields to showcase in autocomplete with AJAX on cakephp

Enhance User Experience with JQuery Autocomplete for Internet Explorer 8 Using ASMX Web Services

Trigger a function upon the addition of a class to a div element | Execute AnimatedNumber()

Tips for automating file uploads in HTML

Modifying the calendar from a 7-day week to a 5-day week

Auto-selecting the first item in a CSS menu when the switcher is tapped on mobile devices

What are alternative methods for creating a table layout without relying on traditional table elements?

Can anyone help me get my carousel to work properly?

Clicking a button in jQuery to load the Pagemethods

When using JavaScript to dynamically load canvases and create drawing contexts within a function, the context may suddenly disappear