LineLoader
An animated loading indicator that displays a sliding dot across a horizontal line. Perfect for indicating loading states with smooth animations and customizable colors and sizes.
Import
import { LineLoader } from "@sparrowengg/twigs-react";Usage
const LineLoaderExample = () => {
return (
<Box css={{ display: "flex", flexDirection: "column", gap: "$6", alignItems: "center" }}>
<Flex gap="$4" alignItems="center">
<LineLoader size="sm" />
<LineLoader size="md" color="secondary" />
<LineLoader size="lg" color="bright" />
<LineLoader size="xl" color="negative" />
</Flex>
</Box>
);
};Props
LineLoader
| Prop | Type | Default |
|---|---|---|
size? | 'sm' | 'md' | 'lg' | 'xl' | 'sm' |
color? | 'primary' | 'secondary' | 'bright' | 'negative' | 'primary' |
css? | object | - |
containerRef? | React.Ref<HTMLDivElement> | - |