### File

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

### Description

Circular progress indicator component that can display progress with optional labels and color states.

### 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
- colorSteps
- colorType
- emptyLabel
- fillColor
- hasBottomLabel
- icon
- iconLabelClass
- iconLabelStyleClass
- isDefaultColorSteps
- size
- tabindex
- value
- valueLabel

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

ariaLabel
Type : `string`
Default value : `'progress circle'`
Accessibility label for the progress circle

colorSteps
Type : `string`

Custom color step thresholds (space or comma separated values)

Example :

colorType
Type : `string`
Override color type ('success', 'warning', 'danger')

emptyLabel
Type : `string`
Default value : `'N/A'`
Label to display when value is 0

fillColor
Type : `string`
Svg icon fill color option

hasBottomLabel
Type : `boolean`
Default value : `false`
Whether to display the label at the bottom of the circle

icon
Type : `string`
Svg icon option

iconLabelClass
Type : `string`

iconLabelStyleClass
Type : `string`

isDefaultColorSteps
Type : `boolean`
Default value : `true`
Whether to use default color steps based on value thresholds

size
Type : `"2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl"`
Default value : `'m'`
Svg icon size option

tabindex
Type : `string`
Default value : `'0'`
Tab index for accessibility

value
Type : `number`
Current progress value (0-100)

valueLabel
Type : `string`
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
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
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 ""