---
url: /api/renderers/web-components/src/variables/progressCircle.md
---
[pantoken-root](../../../../index.md) / [renderers/web-components/src](../index.md) / progressCircle

# Variable: progressCircle

> `const` **progressCircle**: [`ElementDefinition`](../interfaces/ElementDefinition.md)

Alpha

`<instui-progress-circle>` — a circular indicator backed by native `<progress>` or `<meter>` semantics.

`value-now`/`value` drive `--value`, while `min` and `value-max`/`max` drive the range. A zero
minimum renders a native `<progress>`; a non-zero minimum renders `<meter>`. Add the boolean
`should-animate` attribute to animate from zero on mount; `animation-delay` is a millisecond delay.
`label` overrides the accessible name (which otherwise defaults to the percentage).

## Example

```html
<instui-progress-circle value-now="40" value-max="60" should-animate></instui-progress-circle>
```