Bootstrap progress bars

Putting loads of content on your website usually results in increasing its loading time. This may lead to wrecking your User Experience, increasing abandonment rate or lowering your position in search engines.

That’s why you should always provide your user with appropriate feedback.

If it takes too long for your website to load up, your user will be less stressed about it when he sees a simple progress bar. It means as much as “Everything is fine. The content you want to see will load in a few seconds”

Basic example Premium component

<progressbar value="0" min="0" max="100" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></progressbar>
<progressbar value="25" min="0" max="100" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></progressbar>
<progressbar value="50" min="0" max="100" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></progressbar>
<progressbar value="75" min="0" max="100" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></progressbar>
<progressbar value="100" min="0" max="100" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></progressbar>

Contextual alternatives Premium component

<progressbar value="25" min="0" max="100" type="success" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></progressbar>
<progressbar value="50" min="0" max="100" type="info" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></progressbar>
<progressbar value="75" min="0" max="100" type="warning" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></progressbar>
<progressbar value="100" min="0" max="100" type="danger" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></progressbar>

Prealoaders Premium component

Infinite loading:

<md-progress-bar class="progress primary-color-dark" mode="indeterminate"></md-progress-bar>

Circles:

<!--Big blue-->
<progress-spinner spinnerType="big" spinnerColor="blue"></progress-spinner>

<!--Medium red-->
<progress-spinner spinnerColor="red"></progress-spinner>

<!--Small yellow-->
<progress-spinner spinnerType="small" spinnerColor="yellow"></progress-spinner>

Crazy circles:

<!--Big blue-->
<progress-spinner spinnerType="big crazy" spinnerColor="blue"></progress-spinner>

<!--Medium red-->
<progress-spinner spinnerType="crazy" spinnerColor="red"></progress-spinner>

<!--Small green-->
<progress-spinner spinnerType="small crazy" spinnerColor="green"></progress-spinner>

Multicolor:

<progress-spinner spinnerType="big"></progress-spinner>    

Usage

Adding preloader to your project

In order to have working preloaders on every component in your project, you need to add it to the base index.html or the other part from angular2 repository.

<app-root>
    <div class="loader"></div>
</app-root>