# EuiProgressBarComponent

**Type:** component



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
```html
<eui-progress-bar [progress]="75" label="Upload progress"></eui-progress-bar>
```

### Indeterminate loading
```html
<eui-progress-bar [isIndeterminate]="true" label="Loading..."></eui-progress-bar>
```

### With status variants
```html
<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


**Selector:** `eui-progress-bar`

## Inputs
- **e2eAttr**: `string` - Element attribute for e2e testing
- **hasStatusIcon**: `BooleanInput` - When true, displays a status icon based on the current state (success, warning, error, etc.)
- **isIndeterminate**: `BooleanInput` - When true, shows an indeterminate progress animation instead of a specific progress value
- **label**: `string` - Optional label displayed above the progress bar
- **progress**: `NumberInput` - Current progress value (0-100) Values greater than 100 will be capped at 100
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSize2XS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeXS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeM**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeXL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]