packages/eui/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
|