<!-- Auto-generated by `velinstyle docs generate`. Do not edit. Source: components/velin-progress-ring.js -->

# <velin-progress-ring>

Source: `components/velin-progress-ring.js`

## Minimal working example
Copy-paste starter (load CSS + `velinstyle-components` / `bootFromDOM` as needed):

```html
<velin-progress-ring value="35" size="56" stroke="5" label="Waiting"></velin-progress-ring>
```

_Example from curated docgen starter map._

## Accessibility
WCAG contract status: **pass** (framework target: AAA).

- **Roles:** `progressbar`

## Attributes
| Attribute | Notes |
| --- | --- |
| `value` | Observed — triggers `attributeChangedCallback` when changed |
| `size` | Observed — triggers `attributeChangedCallback` when changed |
| `stroke` | Observed — triggers `attributeChangedCallback` when changed |
| `color` | Observed — triggers `attributeChangedCallback` when changed |
## Events
_None._
## CSS parts
- `fill`
- `label`
- `svg`
## Slots
_None._
## Public API
_No public methods detected._
## Related resources
- Generated API docs (canonical): [`velin-progress-ring.md`](./velin-progress-ring.md)
- Generated index: [README.md](./README.md)
- CLI API: `npx velinstyle wc api velin-progress-ring`
- Human docs EN (tutorial): `docs/components/progress-ring.html`
- Human docs DE (tutorial, lang-map): `docs/components/fortschrittsring.html`
- Atelier showcase (DIRECT CE match, `14-email-confirm`): `atelier/library/showcases/14-email-confirm/index.html`
- Atelier library (showcases — **not** a 1:1 Component map): `atelier/library/index.html`