Spinner
A simple spinner for displaying loading state
Installation
1
Copy and paste the following code into your project.
import React from 'react';
import { cn } from '@/lib/utils';
import { VariantProps, cva } from 'class-variance-authority';
import { Loader2 } from 'lucide-react';
const spinnerVariants = cva('flex-col items-center justify-center', {
variants: {
show: {
true: 'flex',
false: 'hidden',
},
},
defaultVariants: {
show: true,
},
});
const loaderVariants = cva('animate-spin text-primary', {
variants: {
size: {
small: 'size-6',
medium: 'size-8',
large: 'size-12',
},
},
defaultVariants: {
size: 'medium',
},
});
interface SpinnerContentProps
extends VariantProps<typeof spinnerVariants>,
VariantProps<typeof loaderVariants> {
className?: string;
children?: React.ReactNode;
}
export function Spinner({ size, show, children, className }: SpinnerContentProps) {
return (
<span className={spinnerVariants({ show })}>
<Loader2 className={cn(loaderVariants({ size }), className)} />
{children}
</span>
);
}
2
Update the import paths to match your project setup.
Usage
Size
With text and custom style
Loading...Loading with custom style
Toggle spinner
Properties
Property | Type | Default |
---|---|---|
className | string | |
size | 'small' | 'medium' | 'large' | medium |
show | boolean | true |
children | React.ReactNode |