Spinner
A CSS-only animated loading indicator. Communicates asynchronous activity to both sighted users and screen readers via role="status" and an accessible label.
Size variants
Three sizes are available: sm, md (default), and lg.
<diwa-spinner size="sm" label="Loading small"></diwa-spinner>
<diwa-spinner size="md" label="Loading"></diwa-spinner>
<diwa-spinner size="lg" label="Please wait"></diwa-spinner>Inline with text
Use the sm size to combine the spinner inline with body text. Always provide a descriptive label for screen readers.
<diwa-spinner size="sm" label="Saving"></diwa-spinner>Async button pattern
Display a spinner next to a button while an async operation is in progress. The button is disabled to prevent duplicate submissions.
<diwa-button loading disabled>Submitting…</diwa-button>
<diwa-spinner size="sm" label="Submitting form"></diwa-spinner>