Loading...

###### Don't Miss Out! Out new update has been release.

###### Something you love is now on sale!

Buy now !

#### Progress

#### Basic progress bars

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We use the `.progress` as a wrapper to indicate the max value of the progress bar. The `.progress-bar` requires an inline style, utility class, or custom CSS to set their width.

25%
50%
75%
100%

#### Progress bars striped

Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color Using CSS Effects.

#### Progress bars animated

The striped gradient can also be animated. Add `.progress-bar-animated` to`.progress-bar` to animate the stripes right to left via CSS3 animations.

#### Multiple bars

Include multiple progress bars in a progress component if you need.

#### Progress with number steps

Use the `.position-absolute` to set progress numbers steps.

#### Custom progress bars

Use the `.progress-bar-animated` and `.progress-bar-striped` to animate the stripes right to left.

###### 0% Getting Started

###### 30% Getting Uploading...

30%

###### 60% Getting Pause...

60%

###### 70% Getting Uploading...

70%

###### 100% Completed

100%

#### Small progress bars

Use `.sm-progress-bar` class to change progress size to small.

30 MB Data
50 MB Data
75 MB Data
90 MB Data

#### Large progress bars

Use `.lg-progress-bar` class to change progress size to large.

25%
50%
75%
100%

#### Custom height progress bars

Set a height value on the `.progress-bar`, so if you change that value the outer`.progress` will automatically resize accordingly.