eui documentation
  1. Components
  2. EuiProgressCircleComponent

File

packages/components/eui-progress-circle/eui-progress-circle.component.ts

Description

Circular progress indicator component that displays progress as a ring with customizable colors and labels. Supports automatic color transitions based on value thresholds and custom label positioning. Provides icon display option for visual enhancement and flexible sizing variants.

Basic usage

Example :
<eui-progress-circle [value]="65"></eui-progress-circle>

With custom label

Example :
<eui-progress-circle [value]="80" valueLabel="4 of 5 tasks"></eui-progress-circle>

With icon

Example :
<eui-progress-circle [value]="100" icon="check" fillColor="success"></eui-progress-circle>

Custom color thresholds

Example :
<eui-progress-circle [value]="45" colorSteps="25 75"></eui-progress-circle>

Accessibility

  • Provide meaningful aria-label to describe the progress context
  • Color states should not be the only indicator of status
  • Ensure sufficient contrast between progress ring and background

Notes

  • Default color steps: 0-33% success, 34-66% warning, 67-100% danger
  • Use isDefaultColorSteps="false" to disable automatic color transitions
  • Bottom label positioning available via hasBottomLabel for longer text

Implements

AfterContentInit OnChanges AfterContentChecked

Metadata

changeDetection ChangeDetectionStrategy.OnPush
encapsulation ViewEncapsulation.None
HostDirectives BaseStatesDirective
 Inputs : euiSizeS euiSizeM euiSizeL euiSizeVariant 
selector eui-progress-circle
imports EUI_ICON
templateUrl ./eui-progress-circle.component.html
styleUrl ./eui-progress-circle.scss

Index

Properties
Methods
Inputs
HostBindings
Accessors

Inputs

ariaLabel
Type : string
Default value : 'progress circle'

Accessibility label for the progress circle
tabindex
Type : string
Default value : '0'

Tab index for accessibility
colorSteps

Custom color step thresholds (space or comma separated values)

Example :
colorType
Default value : null, { transform: colorTypeTransform }

Override color type ('info', 'success', 'warning', 'danger')
emptyLabel
Default value : 'N/A'

Label to display when value is 0
fillColor

Svg icon fill color option
hasBottomLabel
Default value : false, { transform: booleanAttribute }

Whether to display the label at the bottom of the circle
icon

Svg icon option
isDefaultColorSteps
Default value : true, { transform: booleanAttribute }

Whether to use default color steps based on value thresholds
size
Default value : 'm'

Svg icon size option
value
Default value : 0, { transform: transformNumberInRange }

Current progress value (0-100)
valueLabel

Custom label to display instead of percentage

HostBindings

class
Type : string

CSS classes applied to the host element

Methods

setColorSteps
avoid using this method. It will become private in the future.
setColorSteps()

Sets the color state based on value and thresholds

Returns : void
setLabels
avoid using this method. It will become private in the future.
setLabels()

Sets the display label based on current value and configuration

Returns : void

Properties

Public isLongLabel
Type : unknown
Default value : false

Whether the label exceeds a width threshold
Public labelValue
Type : string
Default value : ''

Currently displayed label value
labelValueEl
Type : ElementRef<HTMLSpanElement>
Decorators :
@ViewChild('labelValueEl')

Reference to the label value element
Public offsetWidth
Type : number
Default value : 0

Current width of the label element
Public percentValue
This will be removed in next version of eui as it's unused
Type : string
Default value : ''

Percentage value as string
Public roundedValue
Type : number

Rounded value for display
Public stateColorNumberClass
Type : string
Default value : ''

CSS class for the current color state

Accessors

cssClasses
getcssClasses()

CSS classes applied to the host element

Returns : string

results matching ""

    No results matching ""