packages/components/eui-progress-circle/eui-progress-circle.component.ts
Circular progress indicator component that can display progress with optional labels and color states.
AfterContentInit
OnChanges
AfterContentChecked
| 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 |
Properties |
|
Methods |
Inputs |
HostBindings |
Accessors |
| 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 |
| class |
Type : string
|
|
CSS classes applied to the host element |
| 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
|
| 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 |
| cssClasses |
getcssClasses()
|
|
CSS classes applied to the host element
Returns :
string
|