Loading

Components for indicating loading and progress states.

Prerequisites

Circular loading indicator for inline or small loading states.

import { Spinner } from '@tetherto/mdk-react-devkit/core'

Prop	Status	Type	Default	Description
`size`	Optional	`'sm' \| 'md' \| 'lg'`	`'md'`	Spinner size
`color`	Optional	`'primary' \| 'secondary'`	none	Color variant of the spinner
`type`	Optional	`'circle' \| 'square'`	none	Type of spinner animation
`speed`	Optional	`'slow' \| 'normal' \| 'fast'`	none	Speed of the animation
`label`	Optional	`string`	none	Optional label text displayed below the spinner
`fullScreen`	Optional	`boolean`	`false`	Display in fullscreen mode
`className`	Optional	`string`	none	Additional CSS class

<Spinner />
<Spinner size="sm" />
<Spinner size="lg" />
<Spinner type="circle" speed="fast" />
<Spinner label="Loading miners..." />

<Button disabled>
  <Spinner size="sm" /> Loading...
</Button>

Full-screen or section loading overlay.

import { Loader } from '@tetherto/mdk-react-devkit/core'

Prop	Status	Type	Default	Description
`count`	Optional	`3 \| 5 \| 7`	`5`	Number of dots to display
`color`	Optional	`'red' \| 'gray' \| 'blue' \| 'amber' \| 'orange'`	`'orange'`	Color variant of the loader
`size`	Optional	`number`	`10`	Size of each dot in pixels
`className`	Optional	`string`	none	Additional CSS class

<Loader />
<Loader color="blue" />
<Loader count={3} size={8} color="amber" />
<Loader count={7} size={12} color="red" />

<div className="relative min-h-[200px]">
  {isLoading && <Loader />}
  {data && <DataDisplay data={data} />}
</div>