Waiting for the progress bar

Progress bars are very useful in web applications in cases where, for example, you need to wait for an action to be sent to the server while maintaining a feedback for the user that something is being done in the background.

For instance, we can create a progress bar to present the user that a new tweet is being posted. Likewise, other scenarios can suit well for a progress bar, for example, when you are uploading a file on the server or when the web client is loading some information.

To exemplify this, we will create another alert that will contain a progress bar inside for a new tweet post feedback, subliminally saying "Hey, wait until I finish my task!"

We replace the .alert code that we just created with the new one presented here:

<div class="alert alert-info" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <h3>Posting new Tweet</h3>
</div>

This will produce a blue alert using the colors from .alert-info. In the new element, create the following code for the progress bar:

<div class="alert alert-info" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <h3>Posting new Tweet</h3>
  <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">
    </div>
  </div>
</div>

The result of the progress bar in shown in the next screenshot. Let's understand each part of the new component:

We created a div.progress inside our alert component, which is the gray rectangle to be filled during the progress. Inside it, we have another tag, div.progress-bar, to create the inside filler that contains the .progress-bar-info class to make the bar blue, following the .info contextual color.

The progress bar also has some aria-* attributes and its size is set by the width: 25% style. To change its size, just change the width style.

Progress bar options

Just like alerts, progress bars have the same contextual colors of Bootstrap. Just use the .progress-bar-* prefix while using the suffix of one of the contextual colors. It is also possible to apply stripe marks to the progress bar with the .progress-bar-striped class:

<div class="alert alert-info" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <h3>Posting new Tweet</h3>
  <div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">
    </div>
  </div>
</div>

Finally, you can also animate the strip using the .active class in conjunction with the .progress-bar-striped class. Check out the next screenshot to see the result of addition of the classes:

Animating the progress bar

Now we have a good opportunity to use the CSS @keyframes animations.

If you check out the CSS code when you add the .progress-bar-striped and .active classes, Bootstrap will load the following animation:

.progress-bar.active {
    animation: progress-bar-stripes 2s linear infinite;
}

This animation applies to the CSS selector, the @keyframe defined at progress-bar-stripes:

@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

This means that the striped background will move from a position of 40 pixels to 0, repeating it every 2 seconds.

Well, nice to meet you progress-bar-stripes, but I can do another animation! Create the following @keyframe:

@keyframes w70 {
  from { width: 0%; }
  to { width: 70%; }
}

The goal of this key frame is to change the width of our progress bar from 0% to 70% of the maximum when the page loads. Now apply the new animation to .progress-bar.active:

.progress-bar.active {
  animation: w70 1s ease forwards,
             progress-bar-stripes 2s linear infinite;
}

So, our animation will last 1 second and execute just once, since we defined it to be just forwards. Note that we must override the animations, so after the new animation, which is w70, add the current animation, which is progress-bar-stripes. Refresh the page and see this fancy effect.

Previous Chapter

7. Of Course, You Can Build a Web App!

Next Chapter

Creating a settings page

Table of Contents for Bootstrap 4 – Responsive Web Design

Waiting for the progress bar

Progress bar options

Animating the progress bar

Table of Contents for
Bootstrap 4 – Responsive Web Design