Colors options

Colors options

Mails 9
VIEW ALL MAILS
Chat
  • Some text
    Aenean vulputate eleifend.
    10:10 AM, Today Anna Veber
  • Some text
    Aenean vulputate eleifend.
    10:12 AM, Today Vincent
BASIC EXAMPLE

To change the color use classes .progress-default.progress-default.progress-primary.progress-success.progress-info.progress-warning.progress-danger


90% Complete
80% Complete
60% Complete
50% Complete
40% Complete
30% Complete
STRIPED EXAMPLE

To add stripe in bars You can add .progress-bar-striped  class


90% Complete
80% Complete
60% Complete
50% Complete
40% Complete
30% Complete
SIZES EXAMPLE

To change bars size You can use .progress-lg.progress-md.progress-sm classes


90% Complete
80% Complete
60% Complete
50% Complete
ANIMATED EXAMPLE

To animate bars add .active class


60% Complete
50% Complete
40% Complete
30% Complete
PROGRESS BARS WITH LABEL

90%
80%
60%
50%
40%
30%
PROGRESS BARS WITH TEXT

Index A90%
90% Complete
Index B80%
80% Complete
Index C60%
60% Complete
Index D50%
50% Complete
STACKED EXAMPLE



35% Complete (success)
25% Complete (success)
20% Complete (warning)
10% Complete (danger)