##### Milestone 30%

##### Release 60%

- Mailbox
- Calendar
- Contacts
- Media
- Documents
- Project
- Forum
- Dashboard

# Progress Bars

Official Website

### 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.

##### Photoshop 40%

##### Html 80%

##### Javascript 60%

#### asProgress official website

Progress bar use a linear function, such that the advancement of a progress bar is directly proportional to the amount of work that has been completed.

###### Numbers

###### Percentage

###### Steps

Numbers
25%
Percentage
50%
Steps
50%