### 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
Public isLongLabel Public labelValue labelValueEl Public offsetWidth Public percentValue Public roundedValue Public stateColorNumberClass
###### Methods
setColorSteps setLabels
###### Inputs
ariaLabel tabindex colorSteps colorType emptyLabel fillColor hasBottomLabel icon isDefaultColorSteps size value valueLabel
###### HostBindings
class
###### Accessors
cssClasses

### 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
get `cssClasses()`
CSS classes applied to the host element Returns : `string`

# results matching ""

# No results matching ""