Standard

A standard progress bar.

Uploading Files


      

Indicating

An indicating progress bar visually indicates the current level of progress of a task.

{{ model1 }}% Funded


      

Bar

A progress element can contain a bar visually indicating progress.



      

Progress

A progress bar can contain a text value indicating current progress.



      

Label

A progress element can contain a label.

Uploading Files


      

Active

A progress bar can show activity.

Uploading Files


      

Success

A progress bar can show a success state.

Everything worked, your file is all ready.


      

Warning

A progress bar can show a warning state.

Your file didn't meet the minimum resolution requirements.


      

Error

A progress bar can show an error state.

There was an error.


      

Disabled

A progress bar can be disabled



      

Inverted

A progress bar can have its colors inverted.

Uploading Files Success Warning Error


      

Attached

A progress bar can show progress of an element.

La la la la



      

Size

A progress bar can vary in size.

Tiny Small Standard Large Big


      

Color

Can have different colors:



      

Inverted Color

These colors can also be inverted for improved contrast on dark backgrounds.



      

Adding Custom Labels

You can pass in templates text for each state available to your progress bar which will automatically be updated when your progress bar reaches that state

You can use label setting to change progress bar labels between two preset messages. In addition you can customize the messages themselves by specifying the templated text in text. Templated strings will replace three values on render.