# EuiProgressCircleComponent

**Type:** component

<p>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.</p>
<h3>Basic usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-progress-circle [value]=&quot;65&quot;&gt;&lt;/eui-progress-circle&gt;</code></pre></div><h3>With custom label</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-progress-circle [value]=&quot;80&quot; valueLabel=&quot;4 of 5 tasks&quot;&gt;&lt;/eui-progress-circle&gt;</code></pre></div><h3>With icon</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-progress-circle [value]=&quot;100&quot; icon=&quot;check&quot; fillColor=&quot;success&quot;&gt;&lt;/eui-progress-circle&gt;</code></pre></div><h3>Custom color thresholds</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-progress-circle [value]=&quot;45&quot; colorSteps=&quot;25 75&quot;&gt;&lt;/eui-progress-circle&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Provide meaningful aria-label to describe the progress context</li>
<li>Color states should not be the only indicator of status</li>
<li>Ensure sufficient contrast between progress ring and background</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Default color steps: 0-33% success, 34-66% warning, 67-100% danger</li>
<li>Use <code>isDefaultColorSteps=&quot;false&quot;</code> to disable automatic color transitions</li>
<li>Bottom label positioning available via <code>hasBottomLabel</code> for longer text</li>
</ul>


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

**Standalone:** false

## Inputs

- **ariaLabel**: `string` - <p>Accessibility label for the progress circle</p>

- **tabindex**: `string` - <p>Tab index for accessibility</p>

- **colorSteps**: `undefined` - <p>Custom color step thresholds (space or comma separated values)</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html"></code></pre></div>
- **colorType**: `undefined` - <p>Override color type (&#39;info&#39;, &#39;success&#39;, &#39;warning&#39;, &#39;danger&#39;)</p>

- **emptyLabel**: `undefined` - <p>Label to display when value is 0</p>

- **fillColor**: `undefined` - <p>Svg icon fill color option</p>

- **hasBottomLabel**: `undefined` - <p>Whether to display the label at the bottom of the circle</p>

- **icon**: `undefined` - <p>Svg icon option</p>

- **isDefaultColorSteps**: `undefined` - <p>Whether to use default color steps based on value thresholds</p>

- **size**: `undefined` - <p>Svg icon size option</p>

- **value**: `undefined` - <p>Current progress value (0-100)</p>

- **valueLabel**: `undefined` - <p>Custom label to display instead of percentage</p>

