Circle Loader
Animated circular loading indicator with customizable sizes and colors. Perfect for showing loading states in buttons, forms, and other UI elements.
Import
import { CircleLoader } from "@sparrowengg/twigs-react";Usage
const CircleLoaderExample = () => {
return (
<Box css={{ display: "flex", gap: "$4", alignItems: "center" }}>
<CircleLoader size="sm" />
<CircleLoader size="md" color="secondary" />
<CircleLoader size="lg" color="accent" />
</Box>
);
};Props
CircleLoader
| Prop | Type | Default |
|---|---|---|
size? | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'md' |
color? | 'primary' | 'secondary' | 'bright' | 'negative' | 'accent' | 'primary' |
css? | object | - |
Tabs
A set of layered sections of content that are displayed one at a time. Perfect for organizing related content into separate views.
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.