Spinner

An animated loading indicator. Use it to signal that an async operation is in progress.

View component changelog

preview

React
"use client"

import Spinner from "@radui/ui/Spinner"

const SpinnerExample = () => {
    return (
        <div className="flex items-center gap-6">
            <Spinner size="sm" />
            <Spinner size="md" />
            <Spinner size="lg" />
        </div>
    )
}

export default SpinnerExample

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import Spinner from "@radui/ui/Spinner"

export default () => {
    return <Spinner size="md" />
}

Spinner

An animated loading indicator.

Prop	Type	Default
size	string	""
customRootClass	string	""
className	string	""
aria-label	string	"Loading"
aria-labelledby	string	--
aria-hidden	boolean	false

Edit this page on GitHub →