# EuiProgressCircleComponent

**Type:** component



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
```html
<eui-progress-circle [value]="65"></eui-progress-circle>
```

### With custom label
```html
<eui-progress-circle [value]="80" valueLabel="4 of 5 tasks"></eui-progress-circle>
```

### With icon
```html
<eui-progress-circle [value]="100" icon="check" fillColor="success"></eui-progress-circle>
```

### Custom color thresholds
```html
<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


**Selector:** `eui-progress-circle`

## Inputs
- **ariaLabel**: `string` - Accessibility label for the progress circle
- **tabindex**: `string` - Tab index for accessibility
- **colorSteps**: `undefined` - Custom color step thresholds (space or comma separated values) ```html ```
- **colorType**: `undefined` - Override color type ('info', 'success', 'warning', 'danger')
- **emptyLabel**: `undefined` - Label to display when value is 0
- **fillColor**: `undefined` - Svg icon fill color option
- **hasBottomLabel**: `undefined` - Whether to display the label at the bottom of the circle
- **icon**: `undefined` - Svg icon option
- **isDefaultColorSteps**: `undefined` - Whether to use default color steps based on value thresholds
- **size**: `undefined` - Svg icon size option
- **value**: `undefined` - Current progress value (0-100)
- **valueLabel**: `undefined` - Custom label to display instead of percentage
- **euiSizeS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeM**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]