Progress Spinner
Animated spinner for indicating loading state.
Basic
vue
<template>
<CProgressSpinner />
</template>Custom Color
Override --c-progress-spinner-color to change the stroke color.
vue
<template>
<CProgressSpinner style="--c-progress-spinner-color: var(--c-error-500)" />
</template>Custom Size
Use inline styles or utility classes to set width and height.
vue
<template>
<CProgressSpinner style="width: 80px; height: 80px" />
</template>Custom Speed
Pass animationDuration to change how fast the spinner rotates.
vue
<template>
<CProgressSpinner animation-duration="0.5s" />
</template>API
| Prop | Type | Default | Description |
|---|---|---|---|
strokeWidth | string | 2 | Stroke width of the spinner circle |
fill | string | — | Fill color of the SVG element |
animationDuration | string | 2s | Duration of one full rotation cycle |