Progress Bars

Progress Bars Different Sizes

.progress

40% Complete (success)

Class: .sm

20% Complete

Class: .xs

60% Complete (warning)

Class: .xxs

60% Complete (warning)

Progress bars

40% Complete (primary)
30% Complete (default)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete

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

60% Complete (warning)

Vertical Progress Bars Different Sizes

By adding the class .vertical and .progress-sm, .progress-xs or .progress-xxs we achieve:

40%
100%
60%
60%

Vertical Progress bars

By adding the class .vertical we achieve:

40%
40%
20%
60%
80%

Resent Activity

View All
Mason

Has add new event for UI workshop

5 minute ago

Johen Doe

Has rented the hall for saminar

35 minute ago

Tyler Mark

Has add new event for Strapday

50 minute ago

Evan Doe

Has clear an event for UI seminar

1 hour ago

Sophia Doe

Has add ne meeting for seminar

2 hour ago

Your Event Statistic

View All
National Seminar
Roadshow Miami

Number of deals

75% Successful
25% Unsuccessful
Mayra Sibley

2 Hours

Hi there, I'm Jesse and you?
You

3 minutes

My name is Anne Clarc.
Mayra Sibley

40 seconds

Nice to meet you Anne.
How can i help you?