Notes

Success! Some Header Goes Here

Duis mollis, est non commodo luctus, nisi erat mattis consectetur purus sit amet porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Info! Some Header Goes Here

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, mattis consectetur purus sit amet eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Danger! Some Header Goes Here

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit mattis consectetur purus sit amet.\ Cras mattis consectetur purus sit amet fermentum.

Warning! Some Header Goes Here

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit mattis consectetur purus sit amet. Cras mattis consectetur purus sit amet fermentum.

Progress Bars

Cross-browser compatibility

Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.

Basic

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

Striped

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

Animated

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

Stacked

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