Bootstrap Progress Bars

You will discover how to use Bootstrap to construct progress bars in this article.

Progress bars are a valuable tool for indicating the progress of a task or action to users.

You may learn how to make a straightforward progress bar with a vertical gradients by looking at the illustration below.

<div class="m-4">
    <div class="progress">
        <div class="progress-bar" style="width: 35%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar" style="width: 60%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar" style="width: 85%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar" style="width: 100%"></div>
    </div>
</div>

• Try this code

Note: A simple progress bar with a vertical gradient is demonstrated, utilizing the .progress element as a wrapper to indicate the maximum value of the progress bar and the .progress-bar element to represent the current progress. The width of the .progress-bar requires inline styling or custom CSS to set its width.

To display the progress status as a percentage label, you can place the text directly within the .progress-bar element.

<div class="m-4">
    <div class="progress">
        <div class="progress-bar" style="width: 35%">
            35%
        </div>
    </div>

• Try this code

It is recommended to apply a min-width to the progress bar when showing the percentage label to ensure readability, even for low percentages.

<div class="m-4">
    <div class="progress">
        <div class="progress-bar" style="min-width: 20px;">
            0%
        </div>
    </div>

• Try this code

The default height of the progress bar is 16px, but you can customize its height by setting the CSS height property on the .progress element.

<div class="m-4">
    <!-- Progress bar with 1px height -->
    <div class="progress" style="height: 1px;">
        <div class="progress-bar" style="width: 60%;"></div>
    </div>

• Try this code

For a striped progress bar, you can add the .progress-bar-striped class to the .progress-bar element.

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

• Try this code

Tip: The progress bar's background color is used as a base for the CSS gradient that creates the stripe. To learn how to make gradient colors with CSS, see the CSS3 Gradients guide.

An animated striped effect, include the .progress-bar-animated class.

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

• Try this code

To dynamically update the status of a Bootstrap progress bar using jQuery, the provided example demonstrates how to achieve this.

 <!-- jQuery Script -->
    <script>
        var i = 0;
        function makeProgress() {
            if (i < 100) {
                i = i + 1;
                $(".progress-bar").css("width", i + "%").text(i + "%");
            }

            // Wait for sometime before running this script again
            setTimeout("makeProgress()", 100);
        }
        makeProgress();
    </script>

• Try this code

Multiple progress bars can also be stacked within a progress component, allowing for simultaneous display.

Here is an illustration showing how it truly functions.

<div class="m-4">
    <div class="progress">
        <div class="progress-bar bg-success" style="width: 40%">
            Program Files (40%)
        </div>
        <div class="progress-bar bg-warning" style="width: 32%">
            Residual Files (32%)
        </div>
        <div class="progress-bar bg-danger" style="width: 23%">
            Junk Files (23%)
        </div>
    </div>  
</div>

• Try this code

Background color utility classes can be used to create progress bars of various colors, providing additional meaning through color representation.

<div class="m-4">
    <div class="progress">
        <div class="progress-bar bg-info" style="width: 20%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-success" style="width: 40%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-warning" style="width: 80%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-danger" style="width: 90%"></div>
    </div>

• Try this code

Similarly, you can create different colored striped progress bars using the same background color utility classes.

<div class="m-4">
    <div class="progress">
        <div class="progress-bar bg-info" style="width: 20%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-success" style="width: 40%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-warning" style="width: 80%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-danger" style="width: 90%"></div>
    </div>

• Try this code

What is a Bootstrap Progress Bar?

A Bootstrap Progress Bar is a UI component provided by the Bootstrap framework, which is widely used to create responsive and visually appealing websites. It is used to visually represent the progress of a task or process to users. Progress Bars are often used to show the completion status of file uploads, form submissions, loading of content, or any other process that takes time.

How do you create a basic Bootstrap Progress Bar?

To create a basic Bootstrap Progress Bar, you can use the following HTML structure and classes:

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

In this example, the progress class is applied to the outer container, and the progress-bar class is used for the actual progress bar element. The style attribute in the div tag sets the width of the progress bar to 50%, indicating 50% completion.

What are the important attributes for a Bootstrap Progress Bar?

Bootstrap Progress Bars use various attributes to define their behavior and appearance. The key attributes include:

• style: Sets the width of the progress bar to represent the completion percentage.
• aria-valuenow: Indicates the current value or percentage of completion.
• aria-valuemin: Specifies the minimum value (usually 0).
• aria-valuemax: Specifies the maximum value (usually 100).
• role: Defines the role of the element, usually set to "progressbar".

How can you customize the appearance of a Bootstrap Progress Bar?

You can customize the appearance of a Bootstrap Progress Bar using additional classes and CSS. For instance:

• Add the class bg-{color} to change the background color. Replace {color} with the desired color like success, info, warning, or danger.
• Adjust the height using the h-{value} class.
• To add labels indicating the completion percentage, you can place text inside the progress bar element.

How can animated progress bars be created using Bootstrap?

Bootstrap allows you to create animated progress bars by adding the progress-bar-animated class. For example:

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

The progress-bar-animated class adds a smooth animation effect to the progress bar, making it visually appealing.

Can Bootstrap Progress Bars be used to display striped patterns?

Yes, Bootstrap provides striped progress bars to create visually distinct patterns. You can use the progress-bar-striped class along with the progress-bar class:

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

The progress-bar-striped class adds a striped pattern to the progress bar, enhancing its visual appeal.

How can you create stacked progress bars using Bootstrap?

Bootstrap allows you to create stacked progress bars by nesting multiple div elements with the progress-bar class within a div with the progress class. Each nested div represents a separate segment of the progress bar:

<div class="progress">
  <div class="progress-bar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-warning" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

This example creates a stacked progress bar with three segments of different colors and completion percentages.

How can you add a label indicating the progress percentage on a Bootstrap Progress Bar?

You can add a label to indicate the progress percentage by placing a div with the class progress-bar-label inside the progress-bar element:

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

In this example, the label "50%" will appear inside the progress bar, aligned with the completion percentage.

How can you create a vertical Bootstrap Progress Bar?

To create a vertical Bootstrap Progress Bar, you can use the progress-vertical class and the rotate-180 class to rotate it 180 degrees:

<div class="progress progress-vertical rotate-180">
  <div class="progress-bar" style="height: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>

In this example, the progress-vertical class sets up the vertical orientation, and the rotate-180 class rotates the progress bar to make it appear correctly.

How can you make a Bootstrap Progress Bar responsive?

Bootstrap Progress Bars are responsive by default, meaning they adjust their width to fit the parent container. To make sure your Progress Bars are responsive, place them within appropriately sized containers or grid columns. You can also use responsive classes like w-50 or w-75 to control their width responsively.

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="progress">
        <div class="progress-bar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
    </div>
  </div>
</div>

Can you use Bootstrap's JavaScript to control Progress Bars programmatically?

Yes, Bootstrap's JavaScript library allows you to control Progress Bars programmatically. You can use methods like .width(), .css(), and .attr() to manipulate the progress bar's width and attributes. Additionally, you can use the .animate() method to create smooth transitions.

For example, to increment the progress bar's width over time:

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

<script>
  $(document).ready(function() {
    let progress = 0;
    const progressBar = $('.progress-bar');

    function incrementProgress() {
      if (progress <= 100) {
        progressBar.width(progress + '%').attr('aria-valuenow', progress);
        progress += 10;
        setTimeout(incrementProgress, 1000);
      }
    }

    incrementProgress();
  });
</script>

In this example, the progress bar will increment its width by 10% every second until it reaches 100%. Make sure you have included the Bootstrap and jQuery libraries for this to work.

How can you create a striped and animated progress bar with text indicating completion time in Bootstrap?

You can create a progress bar with text indicating completion time by combining the striped, animated, and text elements within the progress-bar element:

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    60% - Estimated time: 3 mins
  </div>
</div>

3 mins" within it, while having the striped and animated effects.

How can you create a Bootstrap Progress Bar with tooltips on hover?

You can add tooltips to a Bootstrap Progress Bar using the data-toggle and title attributes, along with Bootstrap's JavaScript components:

<div class="progress">
  <div class="progress-bar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" title="80% Complete"></div>
</div>

<script>
    $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>

In this example, the data-toggle="tooltip" attribute enables the tooltip behavior, and the title attribute specifies the tooltip text. The jQuery script initializes tooltips on elements with the data-toggle attribute.

How can you create a Bootstrap Progress Bar that fills based on a certain event, like scrolling?

You can create a Bootstrap Progress Bar that fills based on a specific event, such as scrolling, by utilizing JavaScript and DOM manipulation:

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

<script>
  $(document).ready(function() {
    $(window).scroll(function() {
      const windowHeight = $(window).height();
      const documentHeight = $(document).height();
      const scrollTop = $(window).scrollTop();

      const progress = (scrollTop / (documentHeight - windowHeight)) * 100;
      $('#scroll-progress').width(progress + '%').attr('aria-valuenow', progress);
    });
  });
</script>

In this example, as users scroll down the page, the progress bar will fill based on their position relative to the page's content.

How can you animate the progress of a Bootstrap Progress Bar using CSS transitions instead of the animated class?

You can achieve the animation of a Bootstrap Progress Bar using CSS transitions by defining a transition property on the progress bar's width. Here's an example:

<style>
  .progress-bar {
    transition: width 0.5s ease;
  }
</style>

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

In this example, the transition property with a duration of 0.5s and an easing function (ease) is applied to the .progress-bar class. As you change the width property, the progress bar's width will smoothly transition over 0.5 seconds.

How can you create a Bootstrap Progress Bar with different shapes, like rounded corners?

To create a Bootstrap Progress Bar with rounded corners, you can use the rounded utility class. Here's an example:

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

The rounded class adds rounded corners to the progress bar element.

How can you create a Bootstrap Progress Bar that fills from right to left, instead of the default left to right?

To make a Bootstrap Progress Bar fill from right to left, you can use the flex-row-reverse class to reverse the flex direction of the progress container:

<div class="progress flex-row-reverse">
  <div class="progress-bar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>

The flex-row-reverse class changes the progression direction of the progress bar.

Can you create a responsive Bootstrap Progress Bar that adapts to different screen sizes using Bootstrap's grid system?

Certainly! You can create a responsive Bootstrap Progress Bar using the grid system to adapt to different screen sizes. Here's an example using columns:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="progress">
        <div class="progress-bar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
    </div>
  </div>
</div>

In this example, the progress bar will occupy half of the available width on medium-sized screens and scale accordingly on different screen sizes due to the responsive behavior of Bootstrap's grid system.

How can you create a Bootstrap Progress Bar with different heights?

To create a Bootstrap Progress Bar with different heights, you can use the h-{value} utility class. Here's an example:

<div class="progress">
  <div class="progress-bar h-25" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>

In this example, the h-25 class sets the height of the progress bar to 25% of its container's height.

Can you customize the colors of a Bootstrap Progress Bar beyond the predefined classes?

Yes, you can customize the colors of a Bootstrap Progress Bar beyond the predefined classes by applying custom CSS. Here's an example:

<style>
  .custom-progress-bar {
    background-color: #3498db;
    color: #ffffff;
  }
</style>

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

In this example, the .custom-progress-bar class applies custom background and text colors to the progress bar. You can adjust these values to match your desired color scheme.

How can you create a Bootstrap Progress Bar that gradually changes colors as the completion percentage increases?

You can create a Bootstrap Progress Bar with changing colors using inline CSS and JavaScript to modify the background-color property based on the completion percentage. Here's an example:

<div class="progress">
  <div id="color-changing-progress" class="progress-bar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<script>
  $(document).ready(function() {
    $(window).scroll(function() {
      const scrollTop = $(window).scrollTop();
      const documentHeight = $(document).height();
      const windowHeight = $(window).height();
      const progress = (scrollTop / (documentHeight - windowHeight)) * 100;

      $('#color-changing-progress').width(progress + '%').attr('aria-valuenow', progress);
      $('#color-changing-progress').css('background-color', getColorForPercentage(progress));
    });

    function getColorForPercentage(percentage) {
      if (percentage < 30) {
        return 'red';
      } else if (percentage < 70) {
        return 'yellow';
      } else {
        return 'green';
      }
    }
  });
</script>

In this example, the getColorForPercentage() function calculates the appropriate color based on the completion percentage. The background-color of the progress bar changes gradually from red to yellow to green as the user scrolls down the page.

How can you create a Bootstrap Progress Bar that fills based on an external event, like a button click?

To create a Bootstrap Progress Bar that fills based on an external event like a button click, you can use JavaScript to update the progress bar's width and attributes:

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

<button id="start-button">Start Progress</button>

<script>
  $(document).ready(function() {
    $('#start-button').click(function() {
      let progress = 0;
      const progressBar = $('#dynamic-progress');

      const interval = setInterval(function() {
        if (progress <= 100) {
          progressBar.width(progress + '%').attr('aria-valuenow', progress);
          progress += 5; // Increase by a step value
        } else {
          clearInterval(interval);
        }
      }, 500);
    });
  });
</script>

In this example, when the "Start Progress" button is clicked, the progress bar will gradually fill up in steps of 5% every 500 milliseconds until it reaches 100%.

How can you make the Bootstrap Progress Bar stack horizontally instead of vertically for multiple bars?

To create a horizontal stack of Bootstrap Progress Bars, you can use Bootstrap's grid system to arrange them side by side:

<div class="row">
  <div class="col-md-4">
    <div class="progress">
      <div class="progress-bar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="progress">
      <div class="progress-bar bg-success" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="progress">
      <div class="progress-bar bg-warning" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
</div>

In this example, three progress bars are placed side by side within a row, each occupying 4 columns on medium-sized screens. The col-md-4 class ensures that the progress bars stack horizontally.

Remember to adjust the column classes and widths based on your layout requirements.

The Bootstrap Loading Bar emerges as a pivotal element for improving the user journey within web applications. As a reliable Progress Indicator in Bootstrap, it goes beyond its utilitarian role, becoming an essential part of the user interface that offers clarity and insight into ongoing processes.

The dynamic nature of the Loading Bar transforms it into a versatile Dynamic Progress Tracker, allowing users to intuitively follow the advancement of tasks. Its contribution as a Visual Progress Display not only communicates progression but also adds a layer of visual sophistication to the interface.

Functioning as a Status Indicator Bar, this Bootstrap feature provides users with an immediate understanding of the system's status. The inclusion of animation, such as the Animated Progress Bar, introduces an engaging visual element that elevates the overall user experience.

Effectively Tracking Progress in real-time, the Bootstrap Loading Bar becomes a valuable tool for enhancing user comprehension and engagement. The Dynamic Loading Bar adapts seamlessly to varying conditions, ensuring responsiveness and user-centric interaction.

Serving as a Visual Status Indicator, the Loading Bar enhances the aesthetic appeal of web applications. The addition of animation elements, as observed in the Progress Animation and Real-time Progress Tracker, adds a dynamic quality, making the user experience more interactive and enjoyable.

The Bootstrap Loading Bar is not only functional but also highly Customizable, providing developers with the flexibility to tailor its appearance and behavior. Whether opting for a Bootstrap Zebra Progress Bar to create a distinct visual identity or utilizing Visual Stripes for added flair, the Loading Bar's adaptability is evident.

With the ability to dynamically adjust the Color and Height in the Bar, change progress values in real-time, incorporate Striped Progress Indicators, and utilize Custom Animated Bars, the Bootstrap Loading Bar offers a comprehensive set of features. These contribute to a positive user perception, creating a branded loading experience that aligns seamlessly with the overall design language of the web application.