eui documentation
  1. Components
  2. EuiProgressBarComponent

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
Inputs
HostBindings
Accessors

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
getcssClasses()

CSS classes applied to the host element

Returns : string

results matching ""

    No results matching ""