Milestone
30%

Release
60%

Progress Bars

Progress

Styles

Progress bar is a graphical control element used to visualize the progression
of an extended computer operation, such as a download, file transfer,
or professional skill and work task. The graphic is accompanied by
a textual representation of the progress in a percent format.

Basic Progress

80% Complete

With Label

60%

Striped

80% Complete (success)

Indicating

80% Complete

Animated

90% Complete

Stacked

35% Complete (success)

20% Complete (warning)

10% Complete (danger)

Color

You can also apply any colour suited according to the nature of
the task.

15% Complete

30% Complete

45% Complete

60% Complete

75% Complete

90% Complete

Bar Size

You can also use a thinner version of the default progress by simple
changing the classes.

60% Complete

60% Complete

60% Complete

60% Complete

Radius

You can also use a radius style of the default progress by simple
changing the classes.

50% Complete

50% Complete

50% Complete

Vertical Color

15% Complete

30% Complete

45% Complete

60% Complete

75% Complete

90% Complete

Vertical Bar Size

60% Complete

60% Complete

60% Complete

60% Complete

Vertical Complex Usage

35% Complete (success)

20% Complete (warning)

10% Complete (danger)

70% Complete

80%

90% Complete

95% Complete (success)

Skill Bars

A more recent development is the professional skill bars,
which is used in your professional situations where the
extent of the skill can not be determined in a way that
could be expressed as a percentage.This bar uses motion
and title text to show that progress is taking place.