Ubuntu
18 lines
2.2 KiB
JSON
18 lines
2.2 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "loader",
|
|
"type": "registry:component",
|
|
"title": "Loader",
|
|
"description": "A loading indicator",
|
|
"dependencies": [
|
|
"class-variance-authority"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "components/retroui/Loader.tsx",
|
|
"content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\nconst loaderVariants = cva(\"flex gap-1\", {\n variants: {\n variant: {\n default: \"[&>div]:bg-primary [&>div]:border-black\",\n secondary:\n \"[&>div]:bg-secondary [&>div]:border-black\",\n outline: \"[&>div]:bg-transparent [&>div]:border-black\",\n },\n size: {\n sm: \"[&>div]:w-2 [&>div]:h-2\",\n md: \"[&>div]:w-3 [&>div]:h-3\",\n lg: \"[&>div]:w-4 [&>div]:h-4\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"md\",\n },\n});\n\ninterface LoaderProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, \"color\">,\n VariantProps<typeof loaderVariants> {\n asChild?: boolean;\n count?: number; // number of bouncing dots\n duration?: number; // animation duration in seconds\n delayStep?: number; // delay in ms\n}\n\nconst Loader = React.forwardRef<HTMLDivElement, LoaderProps>(\n (\n {\n className,\n variant,\n size,\n count = 3,\n duration = 0.5,\n delayStep = 100,\n ...props\n },\n ref,\n ) => {\n return (\n <div\n className={cn(loaderVariants({ variant, size }), className)}\n ref={ref}\n role=\"status\"\n aria-label=\"Loading...\"\n {...props}\n >\n {Array.from({ length: count }).map((_, i) => (\n <div\n key={i}\n className=\"border-2 animate-bounce\"\n style={{\n animationDuration: `${duration}s`,\n animationIterationCount: \"infinite\",\n animationDelay: `${i * delayStep}ms`,\n }}\n />\n ))}\n </div>\n );\n },\n);\n\nLoader.displayName = \"Loader\";\nexport { Loader };\n",
|
|
"type": "registry:component",
|
|
"target": "components/retroui/Loader.tsx"
|
|
}
|
|
]
|
|
} |