Progress Bars

These examples are included for development testing purposes. For official documentation, see https://www.patternfly.org and http://getbootstrap.com.

Basic Example

60% Complete

With Label

60% Complete

Contextual Alternatives

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

Striped

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

Animated

45% Complete

Stacked

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

PatternFly Examples

Sizes

Small

60% Complete
60% Complete

Extra Small

60% Complete
60% Complete

With Label

Left

5%
60%
100%
5%
60%
100%

Top Left Description and Top Right Label

Network Capacity
5%
Downloading: Product Repositories
42.7% (35 of 82MB)
46,512 Downloading: Product Repositories
100%
Network Activity: 10.10.121.02
100%
Network Activity: 10.10.121.02
75%
Network Activity: 10.10.121.02
10%

Left Description

CPU
25 of 460 MHz
Network Capacity
250 of 4600 MHz

Left Description and Right Label

CPU
25 of 460 MHz
Network Capacity
250 of 4600 MHz

In Table Cell

Column heading Column heading Column heading
Column content
5%
Column content
Column content
60%
Column content
Column content
100%
Column content

With Tooltip

On Filled Bar

60% Used

On Filled Bar and Negative Space

60% Used
40% Available