Bootstrap 5 Progress Bars
Visual indicators for task completion
đź“Š What are Progress Bars?
Progress bars show the completion status of tasks or processes. They provide visual feedback to users about ongoing operations, file uploads, or multi-step forms using customizable width and color options.
<!-- Basic Progress Bar -->
<div class="progress">
<div class="progress-bar" style="width: 50%"></div>
</div>
Output:
Progress Bar with Label
Add text labels inside progress bars to display percentages, status messages, or completion values directly. Labels help users understand exact progress at a glance, improving clarity and reducing the need for additional explanatory text. You can place any text content inside the progress-bar div, making it easy to show meaningful, real-time feedback for uploads, downloads, task completion, or any multi-step process within your application.
<div class="progress">
<div class="progress-bar" style="width: 25%">25%</div>
</div>
<div class="progress mt-3">
<div class="progress-bar" style="width: 75%">75%</div>
</div>Output:
🔹 Colored Progress Bars
Use Bootstrap’s contextual background classes like bg-success, bg-warning, or bg-danger to color progress bars. Different colors represent various states—green for success, yellow for warnings, red for errors—allowing users to quickly assess status without reading labels. This visual coding enhances usability in dashboards, admin panels, and reporting tools, making it easier to scan and interpret progress across multiple tasks or metrics simultaneously.
<div class="progress mb-3">
<div class="progress-bar bg-success" style="width: 40%">Success</div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-info" style="width: 60%">Info</div>
</div>
<div class="progress mb-3">
<div class="progress-bar bg-warning" style="width: 80%">Warning</div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width: 90%">Danger</div>
</div>Output:
🔹 Striped Progress Bars
Apply the progress-bar-striped class to add a CSS gradient stripe pattern for visual interest. Striped bars can indicate active processing or ongoing tasks. Combine with progress-bar-animated to create moving stripes that show real-time activity, ideal for loading states, background processes, or indeterminate progress indicators. This animated feedback keeps users informed about system activity, reducing uncertainty and improving perceived performance during wait times.
<div class="progress mb-3">
<div class="progress-bar progress-bar-striped" style="width: 50%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width: 75%"></div>
</div>Output:
🔹 Multiple Progress Bars
Stack multiple progress bars inside a single container to display different segments, metrics, or categories together. Each segment can have its own width, color, and label, making this perfect for showing resource allocation, multi-part completion, or comparative data. This approach saves space while providing a comprehensive overview, useful in project management tools, analytics dashboards, or any interface requiring segmented progress visualization.
<div class="progress">
<div class="progress-bar bg-success" style="width: 15%">15%</div>
<div class="progress-bar bg-warning" style="width: 30%">30%</div>
<div class="progress-bar bg-danger" style="width: 20%">20%</div>
</div>Output:
🔹 Progress Bar Heights
Customize progress bar height using inline styles or custom CSS to fit different design needs and layouts. Adjust the height property on the progress container to create thicker emphasis bars or thinner compact indicators. Flexible sizing ensures progress bars integrate seamlessly into various UI contexts—from dense data tables to spacious hero sections—maintaining visual balance and improving overall aesthetic coherence across your application.
<div class="progress mb-3" style="height: 5px">
<div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress mb-3" style="height: 20px">
<div class="progress-bar" style="width: 50%">50%</div>
</div>
<div class="progress" style="height: 30px">
<div class="progress-bar" style="width: 50%">50%</div>
</div>