Progress Bars and Spinners of Bootstrap

 Bootstrap – Progress Bars

The purpose of progress bars is to show that assets are loading, in progress, or that there is action taking place regarding elements on the page.Note! Progress bars using CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and also below or older versions of Firefox. Opera 12 does not support animations.

 Creating Progress Bar with Bootstrap

Progress bars can be commonly used for exhibition the progress of a task or action to the users. The following example will explain you how to create a simple progress bar with vertical gradient. <div class=”progress”> <div class=”progress-bar” style=”width: 50%”></div> </div>

Example-:

If you are show the percentage label you should also apply a min-width to the progress bar to ensure that the label text remains readable even for low percentage, like this:

Example-:

0%2%

 Setting the Height of Progress Bars

The height of the default progress-bar is 16px, but you can also set its height according to your need by setting the CSS height property on the .progress element, like this:

Example-:

 Creating Stripped Progress Bar

To make the stripped progress bar just add an extra class .progress-bar-striped to the .progress-bar element, as shown <div class=”progress”> <div class=”progress-bar progress-bar-striped” style=”width: 60%;”></div> </div>

Output-:

 Creating Animated Progress Bar

You can also animate the stripped progress-bar. Adding the class like-.progress-bar-animated to the .progress-bar element, it will animate the stripes from right to left via CSS3 animations.

Example-:

 Changing Progress Bar Value Dynamically

Static progress bars aren’t very impressive. The following example will show you a rough idea of how to update the status of a Bootstrap progress bar dynamically using jQuery.

Example-:

 Creating Stacked Progress Bar

You can also placing multiple bars into the same progress bar to stack them.

Code-:

Output-:

Program Files (40%)Residual Files (25%)Junk Files (15%)

 Progress Bars with Emphasis Classes

Bootstrap provides a few emphasis utility classes for progress bars that can be further used to convey meaning through color, as shown in the following example:

Code-:

Output-:

 Striped Progress Bars with Emphasis Classes

Like to the solid colors, you can also create varied striped progress bars.

Code-:

Output-:

 Bootstrap Spinners

* Bootstrap “spinners” can be widely used to showing the loading state in your projects.

* They’re build up only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, necessary some custom JavaScript to toggle their visibility.

* You will their appearance, alignment, and sizing can be easily customized with our amazing utility classes.

For accessibility intension, each loader here includes role=”status” and a nested Loading….

 Creating the Spinners with Bootstrap

Spinners-: Spinners are typically loading icons and they’re built only with HTML and CSS. However, you need some custom JavaScript to show or hide them on a web page.he new spinner component that you can use to show the loading state in your projects

To make a spinner or loading indicator, you can use the .spinner-border class:

Code-:

<div class=”spinner-border”> <span class=”sr-only”>Loading…</span> </div>

Output-:

Loading…

 Creating Colored Spinner

You can use the text color utility classes to customize the color of spinners.

Code-:

Output-:

Loading… Loading… Loading… Loading…

 Creating Growing Spinners

You can also create growing spinners that repeatedly grow and fade out, like this:

Code-:

Output-:

Loading…

Similarly, like the border spinners you can also customize the colors of growing spinners using the text color utility classes, as shown in the following example:-

Loading… Loading… Loading… Loading… Loading… Loading… Loading… Loading…

 Sizing of Spinners

You can use the class .spinner-border-sm and .spinner-grow-sm to make a smaller spinner that can quickly be used within other components such as buttons.

Code-:

Output-:

Loading… Loading…

Alternatively, you can use the custom CSS or inline styles to change the size as needed.

Loading… Loading…

 Using Spinners within Buttons

You can also use spinners within buttons to indicate an action is currently processing or taking place.

Code-:

Output-:

Loading…  Loading… Loading…  Loading…

Alignment of Spinners

You can easily align the spinners left, right or center using the flexbox, float, or text alignment utility classes.

Example-:

Leave a Reply

Your email address will not be published. Required fields are marked *