Spinner Preview
Spinners visually communicate that something is processing. They’re used for loading states that take more than a second.
Spinners don’t show how much time is left before the process is done. To communicate a more specific status, try a determinate progress bar instead.
Loading...
Properties
appearance
The appearance of the Spinner.
“primary”
“inverted”
Default:
“‘primary’”
as
“div”
Default:
nonelabel
The label of the Slider. The label slot receives the styling related to the text associated with the Spinner.
WithSlotShorthandValue<WithSlotRenderFunction<Omit<ComponentProps<LabelSlots, "root">, "required"> & { disabled?: boolean; required?: boolean | WithSlotShorthandValue<{ as?: "span"; } & Pick<...> & { ...; } & { ...; }> | null | undefined; size?: "small" | ... 2 more ... | undefined; weight?: ...Default:
nonelabelPosition
Where the label is positioned relative to the Spinner
“before”
“after”
“above”
“below”
Default:
“‘after’”
size
The size of the spinner.
“small”
“tiny”
“extra-small”
“medium”
“large”
“extra-large”
“huge”
Default:
“‘medium’”
spinner
The slot for the animated svg. The spinner slot receives the
className
and
style
that handles the spinning animation. An svg is also rendered as a child of this slot
WithSlotShorthandValue<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | nullDefault:
none