Skip to main content

Feedback

Spinner

CSS-only loading indicator with three sizes and a screen-reader label.

Element
<span>
Module
@basenative/components
Function
renderSpinner

Quick start

Import the render function and call it from your server template.

import { renderSpinner } from '@basenative/components';

renderSpinner({ size: 'lg', label: 'Loading' });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Sizes

CSS-only spinner with three sizes.

Live render
Source
renderSpinner({ size: 'sm', label: 'Loading' })
renderSpinner({ size: 'md', label: 'Loading' })
renderSpinner({ size: 'lg', label: 'Loading' })

Options

Arguments accepted by renderSpinner().

renderSpinner option reference
Option Type Default Description
size 'sm' | 'md' | 'lg' 'md' Diameter preset.
label string 'Loading' Visually-hidden label.