Compass

Please wait...

  • Design Team

  • Avatar
  • Avatar
  • Avatar
  • Avatar
  • Alexander 6:12 Hello, John
  • 6:15 Hi, Alexander
    How are you!
  • 6:16 There are many variations of passages of Lorem Ipsum available
  • Elizabeth 6:25 Hi, Alexander,
    John
    What are you doing?
  • Michael 6:28 I would love to join the team.
  • 7:02 Hello,
    Michael

Progress Bars Welcome to Compass

Basic Examples

60% Complete
75%

Contextual Alternatives Progress bars use some of the same button and alert classes for consistent styles.

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

Striped Uses a gradient to create a striped effect. Not available in IE9 and below.

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

Stacked Place multiple bars into the same .progress to stack them.

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