Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
1.1 kB · 46 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647import { cva } from "class-variance-authority";import type { VariantProps } from "class-variance-authority";
import { cn } from "../lib/utils";
const loadingVariants = cva( "direction-alternate animate-pulse rounded-full duration-700", { variants: { variant: { // we might want to inverse both styles default: "bg-primary-foreground", inverse: "bg-primary", }, size: { default: "h-1 w-1", lg: "h-1.5 w-1.5", }, }, defaultVariants: { variant: "default", size: "default", }, },);
interface Props extends React.ComponentProps<"div">, VariantProps<typeof loadingVariants> {}
export function LoadingAnimation({ className, variant, size, ...props}: Props) { return ( <div className={cn("flex items-center justify-center gap-1", className)} {...props} > <div className={cn(loadingVariants({ variant, size }))} /> <div className={cn(loadingVariants({ variant, size }), "delay-150")} /> <div className={cn(loadingVariants({ variant, size }), "delay-300")} /> </div> );}