### File

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

### Description

Progress bar component that displays a horizontal progress indicator with optional label and status icon.

### Implements

`OnChanges`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective` Inputs : euiSecondary euiSuccess euiInfo euiWarning euiDanger euiAccent 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 ""