CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
two dot zero
two dot zero

Reputation: 31

Animate a Bootstrap progressbar from 0 to 100%

I'm using Twitter Bootstrap to build my web page.

I have this HTML code:

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

I want to animate the progress bar from 0 to 100% when user push the connect button or push the dropdown button (one of two) and when the progressbar reach 100% the script show the alert previously hidden.

Upvotes: 3

Views: 15297

Answers (5)

LittleDude44
LittleDude44

Reputation: 9

I know this was old enough. But try code below, it should help you to animate more than one progress bar (if you happen to use more than one within a page). Everytime you add progress bar, simply add another execProg() with desired width and its respective id

//jQuery for progress bar animating START

function execProg(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 + "%");
  }
}

//The first bar set to 65%
execProg(65, "#barOne");

//The second bar set to 100%
execProg(100, "#barTwo");
//jQuery for progress bar animating 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>

Upvotes: 0

Georgiana Petria
Georgiana Petria

Reputation: 21

In bootstrap v4 the progress bar animation is not by default anymore. You can add transition-duration to the progress bar element to slow down the transition from 0 to the new width.

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

Upvotes: 2

John Slegers
John Slegers

Reputation: 47081

This is all it takes to create an animated progress bar :

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

This particular code will animate the progress bar from the current value to a value of 80%.

A demo

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 seconds
}, 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">Well done! You successfully connected. <a href="#step2" class="alert-link">Next</a></div>

(see also this Fiddle)

Upvotes: 2

Alex
Alex

Reputation: 996

Try this code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Progress Bar</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-example{
    margin: 20px;
}
</style>
</head> 
<body>
<div class="bs-example">
    <h2>Task Progress</h2>
    <div class="progress">
        <div class="progress-bar" id="bar">
            <span class="sr-only">60% Complete</span>
        </div>
    </div>
    <script type="text/javascript">
        var i = 0;
        var progressBar = $("#bar");
        function countNumbers(){
            if(i < 100){
                i = i + 1;
                progressBar.css("width", i + "%");
            }
            // Wait for sometime before running this script again
            setTimeout("countNumbers()", 500);
        }
        countNumbers();
    </script>
</div>
</body>
</html>

Taken this example from:

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-progress-bars.php

http://www.tutorialrepublic.com/html-reference/html5-progress-tag.php

Upvotes: 1

Martin Staufcik
Martin Staufcik

Reputation: 9490

The bootstrap progress bar is animated by default. When you set the progress value to a new value it will cause the the bar to animate. You just need to set the value:

var bar = $(".progress-bar");
bar.attr("aria-valuenow", newValue);
bar.css("width", newValue + "%");

Upvotes: 0

Related Questions