70,79%
  1. Home
  2. UI Features
  3. Progress

Progress Bars

Standard Basic
90% Complete
90% Complete
90% Complete
90% Complete
90% Complete
Standard With label
Complete 80%
Complete 80%
Complete 80%
Complete 80%
Complete 80%
Standard Contextual alternatives
50% Complete (primary)
30% Complete (danger)
70% Complete (info)
90% Complete (warning)
60% Complete (success)
Standard Contextual With label
50%
30%
70%
90%
60%
Standard Striped
80% Complete (primary)
80% Complete (danger)
80% Complete (info)
80% Complete (warning)
80% Complete (success)
Standard Active
80% Complete (primary)
80% Complete (danger)
80% Complete (info)
80% Complete (warning)
80% Complete (success)
Standard Stacked
15% Complete (success)
45% Complete (warning)
30% Complete (danger)
30%
25%
40%
15% Complete (success)
45% Complete (warning)
30% Complete (danger)
30%
25%
40%
15% Complete (success)
45% Complete (warning)
30% Complete (danger)
30%
25%
40%
Middle Basic
90% Complete
90% Complete
90% Complete
90% Complete
90% Complete
Middle With label
Complete 80%
Complete 80%
Complete 80%
Complete 80%
Complete 80%
Middle Contextual alternatives
50% Complete (primary)
30% Complete (danger)
70% Complete (info)
90% Complete (warning)
60% Complete (success)
Middle Contextual With label
50%
30%
70%
90%
60%
Middle Striped
80% Complete (primary)
80% Complete (danger)
80% Complete (info)
80% Complete (warning)
80% Complete (success)
Middle Active
80% Complete (primary)
80% Complete (danger)
80% Complete (info)
80% Complete (warning)
80% Complete (success)
Middle Stacked
15% Complete (success)
45% Complete (warning)
30% Complete (danger)
30%
25%
40%
15% Complete (success)
45% Complete (warning)
30% Complete (danger)
30%
25%
40%
15% Complete (success)
45% Complete (warning)
30% Complete (danger)
30%
25%
40%
Thin Basic
90% Complete
90% Complete
90% Complete
90% Complete
90% Complete
Thin With label
Complete 80%
Complete 80%
Complete 80%
Complete 80%
Complete 80%
Thin Contextual alternatives
50% Complete (primary)
30% Complete (danger)
70% Complete (info)
90% Complete (warning)
60% Complete (success)
Thin Contextual With label
50%
30%
70%
90%
60%
Thin Striped
80% Complete (primary)
80% Complete (danger)
80% Complete (info)
80% Complete (warning)
80% Complete (success)
Thin Active
80% Complete (primary)
80% Complete (danger)
80% Complete (info)
80% Complete (warning)
80% Complete (success)
Thin Stacked
15% Complete (success)
45% Complete (warning)
30% Complete (danger)
30%
25%
40%
15% Complete (success)
45% Complete (warning)
30% Complete (danger)
30%
25%
40%
15% Complete (success)
45% Complete (warning)
30% Complete (danger)
30%
25%
40%
Progress Bar Sizes
60%
60%
60%
60%
60%
60%
60%
60%
60%
60%
30%
25%
40%
30%
25%
40%
30%
25%
40%
30%
25%
40%
30%
25%
40%
60%
60%
60%
60%
60%
60%
60%
60%
60%
60%
30%
25%
40%
30%
25%
40%
30%
25%
40%
30%
25%
40%
30%
25%
40%