Skip to content
Versions v3 v2 v1

Progress

A progress bar gives the user a visual representation of their completion status of an ongoing process or task.

Installation

We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.

For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

If you are using node and NPM, you can install this component using npm:

npm install @patternfly/elements

Then import this component into your project by using a bare module specifier:

import '@patternfly/elements/pf-progress/pf-progress.js';

Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.

Overview

Installation

npm install @patternfly/elements

Usage

Success variant

View HTML Source
<pf-progress variant="success" value="50"></pf-progress>
   

Inside measurement

View HTML Source
<pf-progress value="24" measure-location="inside"></pf-progress>
   

Large size

View HTML Source
<pf-progress value="24" size="lg"></pf-progress>
   

Inside measurement

View HTML Source
<pf-progress value="24" measure-location="inside"></pf-progress>
   

Truncated Description

View HTML Source
<pf-progress
    value="29"
    description-truncated
    description="Very very very very very very very very very very very long description which should be truncated if it does not fit onto one line above the progress bar"
></pf-progress>
   

Slots

None

Attributes

value

Represents the value of the progress bar

DOM Property
value
Type
number
Default
0
description

Description (title) above the progress bar

DOM Property
description
Type
string | undefined
Default
unknown
description-truncated

Indicate whether to truncate the string description (title)

DOM Property
descriptionTruncated
Type
boolean
Default
false
max

Maximum value for the progress bar

DOM Property
max
Type
number
Default
100
min

Minimum value for the progress bar

DOM Property
min
Type
number
Default
0
size

Size of the progress bar (height)

DOM Property
size
Type
'sm' | 'lg' | undefined
Default
unknown
measure-location

Where the percentage will be displayed with the progress element

DOM Property
measureLocation
Type
'outside' | 'inside' | 'none' | undefined
Default
unknown
variant

Variant of the progress bar

DOM Property
variant
Type
'success' | 'danger' | 'warning' | undefined
Default
unknown

Methods

None

Events

None

CSS Custom Properties

CSS Property Description Default
--pf-c-progress--GridGap

Gap between the sections of the progress bar.

1rem
--pf-c-progress__bar--before--BackgroundColor

Color of the progress bar.

#06c
--pf-c-progress__bar--Height

Height of the progress bar.

1rem
--pf-c-progress__bar--BackgroundColor

Background color of the progress bar.

#ffffff
--pf-c-progress__status-icon--Color

Color of the status icon.

#151515
--pf-c-progress__status-icon--MarginLeft

Margin left of the status icon.

0.5rem
--pf-c-progress__indicator--Height

Height of the progress bar indicator.

1rem
--pf-c-progress__indicator--BackgroundColor

Background color of the progress bar indicator.

#ffffff
--pf-c-progress--m-success__bar--BackgroundColor

Background color of the progress bar when variant is success.

#3e8635
--pf-c-progress--m-warning__bar--BackgroundColor

Background color of the progress bar when variant is warning.

#f0ab00
--pf-c-progress--m-danger__bar--BackgroundColor

Background color of the progress bar when variant is danger.

#c9190b
--pf-c-progress--m-success__status-icon--Color

Color of the status icon when variant is success.

#3e8635
--pf-c-progress--m-warning__status-icon--Color

Color of the status icon when variant is warning.

#f0ab00
--pf-c-progress--m-danger__status-icon--Color

Color of the status icon when variant is danger.

#c9190b
--pf-c-progress--m-success--m-inside__measure--Color

Color of the progress bar measure when variant is success and measure location is inside.

#ffffff
--pf-c-progress--m-outside__measure--FontSize

Font size of the progress bar measure when measure location is outside.

0.875rem
--pf-c-progress--m-sm__bar--Height

Height of the progress bar when the size is small.

0.5rem
--pf-c-progress--m-sm__description--FontSize

Font size of the progress bar description when the size is small.

0.875rem
--pf-c-progress--m-lg__bar--Height

Height of the progress bar when the size is large.

1.5rem

CSS Shadow Parts

None

© 2018-2024 Red Hat, Inc. Deploys by Netlify