Bootstrap Progress Bar
What is a Progress Bar?
A progress bar is a graphical element used to show the progress of a task, like file uploads, loading time, or task completion. Bootstrap makes it easy to add progress bars with simple classes.
1. Basic Progress Bar
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Basic Progress Bar</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container mt-4″>
<h4>Task Progress</h4>
<div class=”progress”>
<div class=”progress-bar” role=”progressbar” style=”width: 25%;” aria-valuenow=”25″ aria-valuemin=”0″ aria-valuemax=”100″>25%</div>
</div>
</div>
</body>
</html>
Output:
In this Example:
.progress → Creates the progress bar container.
.progress-bar → Creates the actual progress bar inside the container.
style=”width: 25%;” → Sets the progress bar to 25% completed.
2. Striped Progress Bar
Example:
<!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://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container mt-4″>
<h4>Striped Progress Bar</h4>
<div class=”progress”>
<div class=”progress-bar progress-bar-striped” role=”progressbar” style=”width: 50%;” aria-valuenow=”50″ aria-valuemin=”0″ aria-valuemax=”100″>50%</div>
</div>
</div>
</body>
</html>
Output:
In this Example:
• .progress-bar-striped → Adds diagonal stripes to the progress bar.
• width: 50% → Shows 50% progress.
3. Animated Progress Bar
Example:
<!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://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container mt-4″>
<h4>Animated Progress Bar</h4>
<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″>75%</div>
</div>
</div>
</body>
</html>
Output:
In this Example:
• .progress-bar-striped → Adds stripes to the progress bar.
• .progress-bar-animated → Moves the stripes, making it look like the progress is ongoing.
• width: 75% → Shows 75% progress.
4. Progress Bar with Different Colors
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Progress Bar with Colors</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container mt-4″>
<h4>Progress Bar with Different Colors</h4>
<div class=”progress mb-3″>
<div class=”progress-bar bg-success” role=”progressbar” style=”width: 100%;” aria-valuenow=”100″ aria-valuemin=”0″ aria-valuemax=”100″>Complete!</div>
</div>
<div class=”progress mb-3″>
<div class=”progress-bar bg-warning” role=”progressbar” style=”width: 60%;” aria-valuenow=”60″ aria-valuemin=”0″ aria-valuemax=”100″>60% Completed</div>
</div>
<div class=”progress mb-3″>
<div class=”progress-bar bg-danger” role=”progressbar” style=”width: 30%;” aria-valuenow=”30″ aria-valuemin=”0″ aria-valuemax=”100″>30% Completed</div>
</div>
</div>
</body>
</html>
Output:
In this Example:
• .bg-success (Green) → 100% completed (Success).
• .bg-warning (Yellow) → 60% completed (Warning).
• .bg-danger (Red) → 30% completed (Danger or Problem).
Conclusion
Bootstrap Progress Bars help display task completion visually.
You can add colors, animations, and stripes to make them look better.
Easy to implement in websites with just Bootstrap classes.
Practice Scenarios:
Scenario 1:
Objective: Create a progress bar showing file upload progress at 50%.
Expected Output:
<!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
Bootstrap progress bars are UI components used to visually indicate the completion status of a task or process.
Yes, Iqra Technology offers this tutorial free of charge to help learners build their skills.
The tutorial explains how to create, customize, and use progress bars in Bootstrap, including adding labels, animation, and responsiveness.
Yes, the tutorial provides multiple examples, including animated, striped, and stacked progress bars.
This tutorial is designed for beginners and web developers looking to learn Bootstrap progress bars for various projects.
Yes, the tutorial includes guidance on creating responsive progress bars that work seamlessly on mobile devices.
Absolutely! All the code examples and templates provided are free to use for personal and commercial projects.
Visit the Bootstrap Progress Bars Tutorial Page to get started.
Yes, the tutorial covers advanced techniques such as adding dynamic values and custom styling.
Yes, Iqra Technology offers tutorials in both English and Hindi for broader accessibility.
