Progress Bars
Bootstrap Progress Bars are a versatile component used to visually represent the progress of a task or process. These bars are highly customizable, allowing developers to adjust them for various scenarios like file uploads, loading processes, task completion, and more. Bootstrap’s progress bars are designed to be both functional and aesthetically pleasing, fitting seamlessly into the overall design of a web page while providing clear feedback to the user.
Classes for Bootstrap Progress Bars
Here’s a table listing the key classes used for Bootstrap progress bars:
Class Name | Description |
.progress | The wrapper class for a progress bar. It is used to encapsulate the actual progress bar element. |
.progress-bar | The actual progress bar element, which is contained within the .progress wrapper. |
.progress-bar-striped | Adds stripes to the progress bar for a more detailed aesthetic. |
.progress-bar-animated | Adds a smooth animation to the striped progress bar, creating a moving stripe effect. |
.bg-success, .bg-info, .bg-warning, .bg-danger | Contextual color classes to style the progress bar based on the type of task or status. |
Code Examples with Explanation
Example 1: Basic Progress Bar
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Bootstrap Basic Progress Bar</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”progress”>
<div class=”progress-bar” role=”progressbar” style=”width: 25%;” aria-valuenow=”25″ aria-valuemin=”0″ aria-valuemax=”100″>25%</div>
</div>
</body>
</html>
Explanation
– This snippet creates a basic progress bar using Bootstrap.
– The `.progress` class defines the wrapper for the progress bar, while the `.progress-bar` class is applied to the actual progress bar element.
– The inline style `width: 25%;` sets the progress bar’s completion to 25%. The text inside the `div` adds a visual label of the progress.
Example 2: Striped Progress Bar
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Striped Progress Bar</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”progress”>
<div class=”progress-bar progress-bar-striped” role=”progressbar” style=”width: 50%” aria-valuenow=”50″ aria-valuemin=”0″ aria-valuemax=”100″></div>
</div>
</body>
</html>
Explanation
– This code demonstrates a striped progress bar.
– The `progress-bar-striped` class adds a striped texture to the progress bar, providing a more detailed visual cue of the progress.
– The progress is set to 50%, as indicated by the `width: 50%` style.
Example 3: Animated Progress Bar
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Animated Progress Bar</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”progress”>
<div class=”progress-bar progress-bar-striped progress-bar-animated” role=”progressbar” style=”width: 75%” aria-valuenow=”75″ aria-valuemin=”0″ aria-valuemax=”100″></div>
</div>
</body>
</html>
Explanation
– This example adds animation to the striped progress bar.
– The `progress-bar-animated` class creates a moving stripe effect, which adds a dynamic look and indicates ongoing progress.
– The progress bar is set to 75% completion.
Example 4: Progress Bar with Contextual Color
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Contextual Progress Bar</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”progress”>
<div class=”progress-bar bg-success” role=”progressbar” style=”width: 100%” aria-valuenow=”100″ aria-valuemin=”0″ aria-valuemax=”100″>Complete!</div>
</div>
</body>
</html>
Explanation
– This snippet shows a progress bar with a contextual color.
– The `bg-success` class is used to give the progress bar a green color, typically used to indicate successful completion or positive progress.
– The progress bar displays “Complete!” and is filled to 100%.
These examples illustrate how Bootstrap’s progress bar component can be used to visually represent various stages of progression in a web application. The customization options, such as colors, striping, and animation, allow for flexibility to match the progress bar to the specific context and design of the site.
YouTube Reference :
1) Progress Bars in Hindi/Urdu Part-1
2) Progress Bars in Hindi/Urdu Part-2
