e8-spinner
Updated on Sep 18, 2025 7 minutes to readA versatile spinner component for indicating loading states with multiple spinner types and color variants.
Overview
e8-spinner provides visual feedback for loading or processing operations.
The spinner can be customized with size, color variant, and an accessible label.
You can render it as any HTML element via the tag prop and include a visually hidden label for screen readers.
<!-- Border spinner -->
<e8-spinner
type="border"
variant="success"
class="mr-2"
></e8-spinner>
<!-- Growing spinner with small size -->
<e8-spinner
type="grow"
variant="warning"
small
class="mr-2"
></e8-spinner>
<!-- Logo spinner with accessible label -->
<e8-spinner
type="logo"
label="Loading..."
:small="true"
class="mr-2"
></e8-spinner>
<!-- Custom HTML tag -->
<e8-spinner
type="border"
tag="div"
variant="info"
></e8-spinner>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| label | Accessible text for screen readers. | string | boolean | false |
| small | Renders a smaller version of the spinner. | boolean | false |
| tag | HTML tag to render the spinner element. | string | 'span' |
| type | Spinner type. | E8SpinnerTypes | 'logo' |
| variant | Color variant for the spinner. | E8TextColorVariants | 'primary' |
| role | ARIA role attribute for accessibility. | string | 'status' |
Slots
| Slot | Description |
|---|---|
| default | Not used; content is rendered via props and SVG. |