### File

`packages/components/eui-progress-bar/eui-progress-bar.component.ts`

### Description

Horizontal progress indicator component that visualizes task completion or loading states. Supports determinate progress with percentage values and indeterminate loading animations. Provides optional labeling and status icons for contextual feedback. Integrates with BaseStatesDirective for theming variants (success, warning, danger) and sizing options. Commonly used for file uploads, form submissions, data processing, and loading indicators.

### Basic usage

Example :

    <eui-progress-bar [progress]="75" label="Upload progress"></eui-progress-bar>

### Indeterminate loading

Example :

    <eui-progress-bar [isIndeterminate]="true" label="Loading..."></eui-progress-bar>

### With status variants

Example :

    <eui-progress-bar [progress]="90" euiSuccess [hasStatusIcon]="true"></eui-progress-bar>
    <eui-progress-bar [progress]="50" euiWarning></eui-progress-bar>
    <eui-progress-bar [progress]="25" euiDanger></eui-progress-bar>

### Accessibility

- Uses ARIA attributes to communicate progress state to assistive technologies
- Label provides context for screen readers
- Status icons enhance visual feedback for users with color vision deficiencies

### Notes

- Progress values are automatically capped at 100
- Indeterminate mode shows continuous animation for unknown duration tasks
- Combine with status variants to indicate success, warning, or error states

### Implements

`OnChanges`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective` Inputs : euiSecondary euiSuccess euiInfo euiWarning euiDanger euiSize2XS euiSizeXS euiSizeS euiSizeM euiSizeL euiSizeXL euiVariant euiSizeVariant
selector | `eui-progress-bar`
imports | `EUI_ICON` `EUI_ICON_STATE`
templateUrl | `./eui-progress-bar.component.html`
styleUrl | `./eui-progress-bar.scss`

### Index

###### Properties

- Public baseStatesDirective

###### Inputs

- e2eAttr
- hasStatusIcon
- isIndeterminate
- label
- progress

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

e2eAttr
Type : `string`
Default value : `'eui-progress-bar'`
Element attribute for e2e testing

hasStatusIcon
Type : `BooleanInput`
Default value : `false`
When true, displays a status icon based on the current state (success, warning, error, etc.)

isIndeterminate
Type : `BooleanInput`
Default value : `false`
When true, shows an indeterminate progress animation instead of a specific progress value

label
Type : `string`
Default value : `''`
Optional label displayed above the progress bar

progress
Type : `NumberInput`
Current progress value (0-100) Values greater than 100 will be capped at 100

### HostBindings

class
Type : `string`
CSS classes applied to the host element

### Properties

Public baseStatesDirective
Type : `BaseStatesDirective`
Default value : `inject(BaseStatesDirective)`
Reference to the BaseStatesDirective for managing component states

### Accessors

cssClasses
get `cssClasses()`
CSS classes applied to the host element Returns : `string`

# results matching ""

# No results matching ""