Loader
Loader component - display pulsing dots animation
Loader component - display pulsing dots animation
import { Loader } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
size | Optional | number | undefined | 10 | Size of each dot in pixels |
count | Optional | 3 | 5 | 7 | undefined | 5 | Number of dots to display |
color | Optional | "red" | "gray" | "blue" | "amber" | "orange" | undefined | 'orange' | Color variant of the loader |
className | Optional | string | undefined | — | Custom className for the root element |
Usage
A pulsing dots loading animation. Use it as an inline loading indicator or inside chart/card overlay slots.
Example
/** * Runnable example for Loader. */import { Loader } from '@tetherto/mdk-react-devkit'export const LoaderExample = () => ( <div className="mdk-example-col"> <div className="mdk-example-row"> <Loader /> <Loader color="blue" /> <Loader color="gray" /> </div> <div className="mdk-example-row"> <Loader count={3} size={8} color="orange" /> <Loader count={5} size={10} color="amber" /> <Loader count={7} size={12} color="red" /> </div> </div>)