• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Progress Bars

← Previous Next →

Progress bars are visual indicators that display the status of a task, operation, or process. They help users understand how much of a task has been completed and how much remains. In web applications, progress bars are widely used for file uploads, form completion, loading processes, or performance metrics. Bootstrap 4 provides a versatile and easy-to-use progress bar component that is both responsive and customizable. This tutorial will guide you through all aspects of BS4 progress bars, from basic usage to advanced styling.

What Are Progress Bars?

A progress bar is a horizontal bar that fills up to show the percentage of completion. In Bootstrap 4, progress bars are created using a .progress container along with a .progress-bar element. The width of the .progress-bar represents the completion percentage, which can be dynamically updated if needed.

Basic Progress Bar

The simplest progress bar consists of a parent .progress container and a child .progress-bar. You define the completion percentage by setting the style attribute with a width value.

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    50%
  </div>
</div>

In this example, the bar is filled to 50%, and the aria attributes make it accessible for screen readers.

Contextual Progress Bars

Bootstrap 4 provides contextual classes to indicate different statuses or categories for progress bars. These include:

  • .bg-success – green, indicates positive completion or success

  • .bg-info – blue, informational

  • .bg-warning – yellow, cautionary

  • .bg-danger – red, warning or failure

<div class="progress mb-2">
  <div class="progress-bar bg-success" style="width: 70%;">70%</div>
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-warning" style="width: 40%;">40%</div>
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-danger" style="width: 25%;">25%</div>
</div>

Using color purposefully allows users to quickly understand the meaning of the progress.

Striped Progress Bars

For a more visually engaging effect, you can make progress bars striped using the .progress-bar-striped class. Striped bars add diagonal lines to the filled area, making it look dynamic and visually interesting.

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width: 60%;">60%</div>
</div>

Animated Progress Bars

If you want the stripes to animate continuously, use .progress-bar-animated in combination with .progress-bar-striped. This is often used to indicate ongoing activity.

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%;">75%</div>
</div>

Animated progress bars are useful for loading states or tasks that are actively being processed.

Multiple Progress Bars in a Single Container

Bootstrap allows stacking multiple progress bars inside a single .progress container. This is helpful for showing different segments or categories of progress simultaneously.

<div class="progress">
  <div class="progress-bar bg-success" style="width: 30%;">30%</div>
  <div class="progress-bar bg-warning" style="width: 20%;">20%</div>
  <div class="progress-bar bg-danger" style="width: 10%;">10%</div>
</div>

Stacked bars give users a clear overview of multiple stages or contributions within a single task.

Progress Bars with Labels

Adding text inside the progress bar helps communicate the exact percentage or status. This can be done directly inside the .progress-bar element. For long text, ensure it fits properly or is truncated using CSS.

<div class="progress">
  <div class="progress-bar bg-info" style="width: 55%;">Uploading Files</div>
</div>

Accessibility Considerations

Progress bars should be accessible to all users. Always include:

  • role="progressbar"

  • aria-valuenow – current progress

  • aria-valuemin – minimum value, usually 0

  • aria-valuemax – maximum value, usually 100

These attributes help assistive technologies interpret the progress accurately.

Customization

While Bootstrap provides default styles, you can customize progress bars:

  • Change background colors using CSS

  • Adjust height using .progress height property

  • Add rounded corners with border-radius

  • Add shadows or gradients for more depth

<div class="progress" style="height: 30px;">
  <div class="progress-bar bg-success" style="width: 50%; border-radius: 15px;">50%</div>
</div>

Best Practices

  1. Use progress bars to communicate meaningful progress.

  2. Avoid excessive use; too many progress bars can overwhelm users.

  3. Match colors to meaning (green for success, red for warnings).

  4. Keep text inside progress bars concise and readable.

  5. Use animated bars only for ongoing processes, not static completion.

Practical Examples

  • File Upload: Show progress percentage during file uploads.

  • Form Completion: Indicate how much of a multi-step form is complete.

  • Task Management: Display project or task completion percentage.

  • Performance Metrics: Show statistics like storage usage or CPU performance.

  • Multi-Stage Processes: Use multiple stacked progress bars for different stages of a process.

Summary of the Tutorial

Bootstrap 4 progress bars are flexible, responsive, and visually informative. They can display completion percentage, status, and multiple segments, and can be striped or animated to enhance visual feedback. By using progress bars effectively, you can improve the user experience, provide clarity on task completion, and create a polished, professional interface.

Practice Questions

  1. Create a basic progress bar filled to 50% with the default style.

  2. Create a green progress bar using .bg-success filled to 70%.

  3. Create three progress bars stacked in a single container with widths 30%, 20%, and 10%, using different contextual colors.

  4. Create a striped progress bar filled to 60% using .progress-bar-striped.

  5. Create an animated striped progress bar filled to 75% using .progress-bar-animated and .progress-bar-striped.

  6. Create a progress bar with text inside it displaying the exact percentage (e.g., “50% Completed”).

  7. Create a progress bar with a custom height of 25px and rounded corners using inline CSS or a style block.

  8. Create a progress bar indicating file upload progress with .bg-info and label it “Uploading Files.”

  9. Create a multi-step task progress bar with three segments: .bg-success 40%, .bg-warning 30%, .bg-danger 20%.

  10. Create a progress bar with accessibility attributes: role="progressbar", aria-valuenow, aria-valuemin, and aria-valuemax, showing 55% completion.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top