## Examples

### Simple


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Small


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Large


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Outside


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Inside


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### Success


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### Warning


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### Failure


import Example8 from './Example8.html?raw'

<LiveExample html={Example8} />

### Inside success


import Example9 from './Example9.html?raw'

<LiveExample html={Example9} />

### Inside warning


import Example10 from './Example10.html?raw'

<LiveExample html={Example10} />

### Outside failure


import Example11 from './Example11.html?raw'

<LiveExample html={Example11} />

### Outside static width measure


import Example12 from './Example12.html?raw'

<LiveExample html={Example12} />

### On single line


import Example13 from './Example13.html?raw'

<LiveExample html={Example13} />

### Without measure


import Example14 from './Example14.html?raw'

<LiveExample html={Example14} />

### Failure without measure


import Example15 from './Example15.html?raw'

<LiveExample html={Example15} />

### Finite step


import Example16 from './Example16.html?raw'

<LiveExample html={Example16} />

### Truncate description


import Example17 from './Example17.html?raw'

<LiveExample html={Example17} />

### Helper text


import Example18 from './Example18.html?raw'

<LiveExample html={Example18} />

### Non-percentage progress

If the status that displays with the bar is not a percentage, then the ARIA tag `aria-valuetext` should be used to provide this status to screen reader users. This is the only case when setting the `aria-valuemax` to a value other than "100" is recommended, given how different screen readers handle these attributes.

### Progress step instruction


import Example19 from './Example19.html?raw'

<LiveExample html={Example19} />

## Documentation

### Overview

### Accessibility

If this component is describing the loading progress of a particular region of a page, the author should use `aria-describedby` to point to the status, and set the `aria-busy` attribute to `true` on the region until it is finished loading.

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `role="progressbar"` | `.pf-v6-c-progress__bar` |  This role is used for an element that displays the progress status for a task that takes a long time or consists of several steps. |
| `aria-valuenow=""` | `.pf-v6-c-progress__bar` |  This value needs to be updated as progress continues. |
| `aria-valuemin="0"` | `.pf-v6-c-progress__bar` |  The minimum value for the progress bar. |
| `aria-valuemax="100"` | `.pf-v6-c-progress__bar` |  The maximum value for the progress bar. If the progress is only defined using `aria-valuenow` (e.g a percentage), the value should be set to "100". If the progress is defined using `aria-valuetext`, then this value can be a number other than 100. For example, if `aria-valuetext` is "2 of 5 units", then `aria-valuemax` can be "5" and `aria-valuenow` can be "2". |
| `aria-label="[id of .pf-v6-c-progress__description]"` | `.pf-v6-c-progress__bar` | Provides an accessible name for the progress component. |
| `aria-labelledby="[id element that labels the progress]"` | `.pf-v6-c-progress__bar` | Provides an accessible name for the progress component. |
| `aria-describedby="[id of element that describes the progress]"` | `.pf-v6-c-progress__bar` | Provides an accessible description for the progress component. |
| `aria-valuetext="[loading state]"` | `.pf-v6-c-progress__bar` |  Provide a text string that communicates current status. Only use if the important information about status is included in the text string. Do not use if percentage is the most important value to communicate. Some screen readers will ignore the percentage value determined from `aria-valuenow` when `aria-valuetext` is used. |
| `aria-hidden="true"` | `.pf-v6-c-progress__status` |  Hides the visible progress bar status from screen readers. This information is communicated by the aria attributes defined on the `.pf-v6-c-progress__bar` element. |

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-progress` | `<div>` |  Initiates a progress component. |
| `.pf-v6-c-progress__description` | `<div>` |  The description for a progress bar. |
| `.pf-v6-c-progress__status` | `<div>` |  Displays the % of progress and status icons. |
| `.pf-v6-c-progress__measure` | `<span>` |  Displays the % complete. |
| `.pf-v6-c-progress__status-icon` | `<span>` |  Displays the status icon. (optional) |
| `.pf-v6-c-progress__bar` | `<div>` |  Displays across the entire width and represents the completed state. |
| `.pf-v6-c-progress__indicator` | `<div>` |  Displays with the `.pf-v6-c-progress__bar` to indicate the progress so far. |
| `.pf-v6-c-progress__helper-text` | `<div>` |  Displays additional text below the progress bar. (optional) |
| `.pf-m-lg` | `.pf-v6-c-progress` |  Modifies the progress bar to be larger. |
| `.pf-m-sm` | `.pf-v6-c-progress` |  Modifies the progress bar to be smaller. |
| `.pf-m-inside` | `.pf-v6-c-progress` |  Shows the measure within the progress indicator. NOTE: This option requires `.pf-m-lg`.|
| `.pf-m-outside` | `.pf-v6-c-progress` |  Shows the measure and status icon to the right of the progress bar. |
| `.pf-m-singleline` | `.pf-v6-c-progress` | Modifies the progress component to exist on one row. If a measure is needed, use with `.pf-m-inside` or `.pf-m-outside`|
| `.pf-m-success` | `.pf-v6-c-progress` |  Changes the appearance of the progess component to indicate a success state. |
| `.pf-m-warning` | `.pf-v6-c-progress` |  Changes the appearance of the progess component to indicate a warning state. |
| `.pf-m-danger` | `.pf-v6-c-progress` |  Changes the appearance of the progess component to indicate a danger (failure) state. |
| `.pf-m-truncate` | `.pf-v6-c-progress__description` | Modifies the description to display a single line and truncate any overflow text with ellipses. |
| `.pf-m-static-width` | `.pf-v6-c-progress.pf-m-outside .pf-v6-c-progress__measure` | Modifies the measure element to have a static `min-width` that will hold 0-100%. Overridable by setting `--pf-v6-c-progress__measure--m-static-width--MinWidth`. |