Standalone spinner sizes
Use these when the loading state is visible on its own.
<CwSpinner size="sm" />
<CwSpinner size="md" />
<CwSpinner size="lg" />
<CwSpinner size="xl" />CwSpinner
Loading indicator shared by buttons, tables and other async states. It is hidden from screen
readers unless showLabel is set, so pair a bare spinner with visible or aria-busy context.
Sizes
With Label
Loading sensor data… Syncing greenhouse devices…
Inline Usage
Refreshing table rows…
<CwSpinner size="md" />
<CwSpinner size="lg" showLabel label="Loading data..." />API
Usage and API reference
CwSpinner is the shared loading indicator used across buttons and async UI. Most screens only need a size choice and, occasionally, an accessible label.
How to think about it
- Pick the smallest size that still reads clearly `sm` and `md` work inline, while `lg` and `xl` are better for loading states that stand on their own.
- Add a label when the spinner stands alone If there is no nearby descriptive text, enable `showLabel` so assistive tech and users both get context.
- Do not duplicate button loading spinners `CwButton` already uses this component internally when `loading` is true.
Props and callbacks
| API | Type | Details |
|---|---|---|
size Default: | 'sm' | 'md' | 'lg' | 'xl' | Spinner size preset. |
showLabel Default: | boolean | Renders an inline status label and enables status ARIA attributes. |
label Default: | string | Status text used when `showLabel` is enabled. |
Copy-paste examples
Each snippet is a complete, working example you can paste into a Svelte 5 component.
Accessible loading message
Enable `showLabel` when the spinner is not next to its own explanatory text.
<CwSpinner size="lg" showLabel label="Syncing greenhouse devices..." />