Saved Bookmarks
| 1. |
How Progress Bar work in Bootstrap? |
|
Answer» PROGRESS Bar display loading or a process. It’s easy to crate Progress Bar with Bootstrap using some PREDEFINED classes. The .progress class is used in Bootstrap to create a Progress Bar. Include a .progress class to a <div> element. After that add an empty <div> with another class i.e. .progress-bar: <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%"> <span class="sr-only">80%</span> </div> </div>For users working with screen readers and to support accessibility, we have used aria-valuemin and aria-valuemax attributes. The above code will create the following Progress Bar: Above, we created a Progress Bar, but no information of the level of completion is visible. For that, you need to use label with Progress Bar. Let us see how to add a label to our Progress Bar: <!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>Level of impurities in WATER</h2> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%"> 80% </div> </div> </div> </body> </html>The OUTPUT displays the % level visible on the Progress Bar since we have added label: |
|