How can I animate a Progress Bar in Bootstrap?

1.	How can I animate a Progress Bar in Bootstrap?
Answer» The .active class is used in Bootstrap to create an animated Progress Bar. To your already created ProgressBar, include the .active class with the other Progress Bar classes like: <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%"> 90% </div> The animation would only be visible if you have already set the Progress Bar to have strip lines as shown in the following example. Here, we have 4 Progress Bars and all are animated: <!DOCTYPE HTML> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link REL="stylesheet" HREF="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>App Performance</h2> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%"> 90% </div> </div> <h2>App Crashes</h2> <div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width:10%"> 10% </div> </div> <h2>App Errors</h2> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%"> 20% </div> </div> <h2>App Success Rate</h2> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"> 75% </div> </div> </div> </body> </html> The output DISPLAYED is animated:

Answer»

The .active class is used in Bootstrap to create an animated Progress Bar. To your already created ProgressBar, include the .active class with the other Progress Bar classes like:

The animation would only be visible if you have already set the Progress Bar to have strip lines as shown in the following example. Here, we have 4 Progress Bars and all are animated:

<!DOCTYPE HTML> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link REL="stylesheet" HREF="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>App Performance</h2> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%"> 90% </div> </div> <h2>App Crashes</h2> <div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width:10%"> 10% </div> </div> <h2>App Errors</h2> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%"> 20% </div> </div> <h2>App Success Rate</h2> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"> 75% </div> </div> </div> </body> </html>

The output DISPLAYED is animated:

How can I animate a Progress Bar in Bootstrap?

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment