Components
Spinner
Option for your additional loading indicator
Selected Theme
Select brand or tribe name to preview style
Default
Usage
A spinner component to display a loading state of a page or section.
import { Spinner } from 'legion-ui';
Basic
Default usage of Spinner and its behavior being md in size and primary in variants.
<Spinner />
Inside a Container
Spinning inside a centered container.
<div className="flex justify-center items-center"><Spinner /></div>
Size
You can customise the size of the Spinner via the size prop, which accepts either sm, md, or lg. By default size is md.
<Spinner size="sm" /><Spinner size="md" /><Spinner size="lg" />
Variants
The spinner has two available variants: primary and secondary. By default it is using the primary value.
<Spinner size="lg" variant="primary" /><Spinner size="md" variant="secondary" />
Props
| property | propType | required | default | description |
|---|---|---|---|---|
| size | sm | md | lg | - | md | Set the size of the spinner |
| style | object | - | - | The style prop lets you style elements inline |
| variant | primary | secondary | - | primary | Set the color/them value of the spinner |
Do you have feedback?
Please let us know to make it better