import { cn } from '@/lib/utils'; import { type VariantProps, cva } from 'class-variance-authority'; import * as React from 'react'; const progressVariants = cva( 'relative flex w-full items-center justify-center overflow-hidden', { variants: { variant: { default: 'border-4 border-primary bg-neutral-950', secondary: 'border-4 border-secondary bg-neutral-900', destructive: 'border-4 border-destructive bg-neutral-950', }, radius: { default: 'rounded-3xl', full: 'rounded-full', none: 'rounded-none', }, }, defaultVariants: { variant: 'default', radius: 'default', }, } ); const indicatorVariants = cva( 'absolute bottom-0 left-0 z-20 w-full transition-[height,background-color] duration-300', { variants: { variant: { default: 'bg-primary', secondary: 'bg-secondary', destructive: 'bg-destructive', }, striped: { true: '[&>div]:bg-[linear-gradient(45deg,rgba(255,255,255,.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,.15)_50%,rgba(255,255,255,.15)_75%,transparent_75%,transparent)] [&>div]:bg-size-1', false: '', }, }, defaultVariants: { variant: 'default', striped: true, }, } ); export interface ProgressProps extends React.HTMLAttributes, VariantProps { value?: number; max?: number; striped?: boolean; indicatorClassName?: string; showText?: boolean; } const Progress = React.forwardRef( ( { className, value = 0, max = 100, variant, radius, striped = true, indicatorClassName, showText, ...props }, ref ) => { const percentage = Math.min(Math.max((value / max) * 100, 0), 100); return (

{showText && (

{percentage.toFixed(0)} %

)}

); } ); Progress.displayName = 'Progress'; export { Progress };

Prop	Type	Description	Default
className	string	Custom class name	""
value	number	Value of the progress bar	0
max	number	Maximum value of the progress bar	100
variant	string	Variant of the progress bar	"default"
radius	string	Radius of the progress bar	"default"
striped	boolean	Whether the progress bar is striped	true
indicatorClassName	string	Custom class name for the indicator	""

Modern Progress

Installation

Props

Credits