Create a dynamic Bootstrap progress bar that smoothly transitions from 0 to 100%

Question

Create a dynamic Bootstrap progress bar that smoothly transitions from 0 to 100%

I am currently utilizing Twitter Bootstrap to construct my webpage.

Here is the snippet of HTML code I have:

<div class="btn-group">
    <button type="button" class="btn btn-success">Connect</button>
    <button type="button" class="btn btn-success dropdown-data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#"> Connect 1</a></li>    
        <li role="separator" class="divider"></li>
        <li><a href="#"> Connect 2</a></li>
    </ul>
</div>

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>

<div class="alert alert-success" role="alert">Well done! You successfully connected. <a href="#step2" class="alert-link">Next</a></div>

My goal is to create an animation for the progress bar, transitioning from 0% to 100% when the user clicks either the connect button or the dropdown button (either one). Once the progress bar reaches 100%, a previously hidden alert message should be displayed.

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

Here is a simple way to create an animated progress bar:

var $progressBar = $('.progress-bar').css('width', '80%');

This code snippet will smoothly animate the progress bar from its current value to 80%.

Check out this demonstration

var $progress = $('.progress');
var $progressBar = $('.progress-bar');
var $alert = $('.alert');

setTimeout(function() {
    $progressBar.css('width', '10%');
    setTimeout(function() {
        $progressBar.css('width', '30%');
        setTimeout(function() {
            $progressBar.css('width', '100%');
            setTimeout(function() {
                $progress.css('display', 'none');
                $alert.css('display', 'block');
            }, 500); // WAIT 5 milliseconds
        }, 2000); // WAIT 2 seconds
    }, 1000); // WAIT 1 second
}, 1000); // WAIT 1 second

.progress, .alert {
    margin: 15px;
}

.alert {
    display: none;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>

<div class="alert alert-success" role="alert">Great job! You have successfully connected. <a href="#step2" class="alert-link">Next</a></div>

(view this Fiddle)

Answer 2

Here is a simple way to create an animated progress bar:

var $progressBar = $('.progress-bar').css('width', '80%');

This code snippet will smoothly animate the progress bar from its current value to 80%.

Check out this demonstration

var $progress = $('.progress');
var $progressBar = $('.progress-bar');
var $alert = $('.alert');

setTimeout(function() {
    $progressBar.css('width', '10%');
    setTimeout(function() {
        $progressBar.css('width', '30%');
        setTimeout(function() {
            $progressBar.css('width', '100%');
            setTimeout(function() {
                $progress.css('display', 'none');
                $alert.css('display', 'block');
            }, 500); // WAIT 5 milliseconds
        }, 2000); // WAIT 2 seconds
    }, 1000); // WAIT 1 second
}, 1000); // WAIT 1 second

.progress, .alert {
    margin: 15px;
}

.alert {
    display: none;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>

<div class="alert alert-success" role="alert">Great job! You have successfully connected. <a href="#step2" class="alert-link">Next</a></div>

(view this Fiddle)

Answer 3

Answer №2

In the latest version of bootstrap, v4, the progress bar animation has been removed as a default feature. To incorporate animation, you can include the transition-duration property in the progress bar element to control the speed of transition from 0 to the new width.

<div class="progress-bar progress-bar-animated" role="progressbar" style="transition-duration:300ms;"></div>

Answer 4

In the latest version of bootstrap, v4, the progress bar animation has been removed as a default feature. To incorporate animation, you can include the transition-duration property in the progress bar element to control the speed of transition from 0 to the new width.

<div class="progress-bar progress-bar-animated" role="progressbar" style="transition-duration:300ms;"></div>

Answer 5

Answer №3

Give this code a try:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Bootstrap 3 Progress Bar Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-sample{
    margin: 20px;
}
</style>
</head> 
<body>
<div class="bs-sample">
    <h2>Progress Tracker</h2>
    <div class="progress">
        <div class="progress-bar" id="bar">
            <span class="sr-only">35% Done</span>
        </div>
    </div>
    <script type="text/javascript">
        var n = 0;
        var progressIndicator = $("#bar");
        function countUp(){
            if(n < 100){
                n = n + 1;
                progressIndicator.css("width", n + "%");
            }
            // Set a brief waiting period before repeating the script
            setTimeout("countUp()", 500);
        }
        countUp();
    </script>
</div>
</body>
</html>

Referenced from:

Answer 6

Give this code a try:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Bootstrap 3 Progress Bar Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-sample{
    margin: 20px;
}
</style>
</head> 
<body>
<div class="bs-sample">
    <h2>Progress Tracker</h2>
    <div class="progress">
        <div class="progress-bar" id="bar">
            <span class="sr-only">35% Done</span>
        </div>
    </div>
    <script type="text/javascript">
        var n = 0;
        var progressIndicator = $("#bar");
        function countUp(){
            if(n < 100){
                n = n + 1;
                progressIndicator.css("width", n + "%");
            }
            // Set a brief waiting period before repeating the script
            setTimeout("countUp()", 500);
        }
        countUp();
    </script>
</div>
</body>
</html>

Referenced from:

Answer 7

Answer №4

By default, the bootstrap progress bar comes with built-in animation. Simply updating the value of the progress will trigger the animation of the bar. All you have to do is assign the new value to the progress:

let progressBar = $(".progress-bar");
progressBar.attr("aria-valuenow", updatedValue);
progressBar.css("width", updatedValue + "%");

Answer 8

By default, the bootstrap progress bar comes with built-in animation. Simply updating the value of the progress will trigger the animation of the bar. All you have to do is assign the new value to the progress:

let progressBar = $(".progress-bar");
progressBar.attr("aria-valuenow", updatedValue);
progressBar.css("width", updatedValue + "%");

Answer 9

Answer №5

While this information may be dated, there is a helpful code snippet below that can assist you in animating multiple progress bars on a single page. Simply follow the instructions to add more progress bars as needed.

//Custom JavaScript for animating progress bars START

function animateProgress(num, id) {
  /* num --> percentage of width
   * id --> id of progress bar
   */

  var progressBar = $(id);
  for (var i = 0; i < num; i++) {
    progressBar.css("width", i + "%");
  }
}

//First progress bar set to 65%
animateProgress(65, "#barOne");

//Second progress bar set to 100%
animateProgress(100, "#barTwo");
//Custom JavaScript for animating progress bars END

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="progress" id="setProg">
  <div class="progress-bar align-middle" id="barOne">
    <p>Some Text Here</p>
  </div>
</div>
<div class="m-3"></div>
<div class="progress" id="setProg">
  <div class="progress-bar" id="barTwo">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Answer 10

While this information may be dated, there is a helpful code snippet below that can assist you in animating multiple progress bars on a single page. Simply follow the instructions to add more progress bars as needed.

//Custom JavaScript for animating progress bars START

function animateProgress(num, id) {
  /* num --> percentage of width
   * id --> id of progress bar
   */

  var progressBar = $(id);
  for (var i = 0; i < num; i++) {
    progressBar.css("width", i + "%");
  }
}

//First progress bar set to 65%
animateProgress(65, "#barOne");

//Second progress bar set to 100%
animateProgress(100, "#barTwo");
//Custom JavaScript for animating progress bars END

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="progress" id="setProg">
  <div class="progress-bar align-middle" id="barOne">
    <p>Some Text Here</p>
  </div>
</div>
<div class="m-3"></div>
<div class="progress" id="setProg">
  <div class="progress-bar" id="barTwo">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Create a dynamic Bootstrap progress bar that smoothly transitions from 0 to 100%

Answer №1

Check out this demonstration

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Is it possible to generate a dynamic submenu and trigger events using the append method?

What is the best way to retrieve a specific value from a JSON file using a numerical identifier?

Looking for a dynamic submenu that remains active even after refreshing the page? Check out the jQuery

Angular receives error when making $http calls that return a 200 response

Make sure the text remains separate while on the same line as the div element

Adding data to a defaultContent JSON column in JQuery DataTable using JavaScript

Tips for creating a consistent format based on test cases

The jQuery UI datepicker fails to display if the element has previously been hidden

Exploring the Live Search Functionality on an HTML Webpage

What is the best way to eliminate excess spacing between HTML td and table elements in Outlook?

Incorporate a JavaScript file into a JSON document

Storing bytes in Java until saving the Ajax file upload

Convert a tuple into a JSON string

Modify the contents of an array within a string using JavaScript

Vue component with a variable number of rows, each containing a variable number of input fields

Remove the list by conducting a comparison analysis

Create a list of items that are enclosed within a parent element

Link not functioning correctly on mobile-responsive CSS

Joining arguments beyond argv[2] in a Node.js application

Ensure that a child div is displayed above the parent div that is absolutely positioned