React Progress Bar

Copy Page

A modern, animated progress bar component built with Framer Motion and Tailwind CSS. It provides a visual representation of a task's completion status with smooth transitions and customizable styles.

Installation

Usage

Import the Progress component and provide a value between 0 and max (default 100).

Variants

The progress bar supports several visual variants to match your UI's context.

Default

The standard primary progress bar.

Gradient

A vibrant gradient variant using indigo, purple, and pink.

Success

Used for completed tasks or positive progress.

Warning

Used for tasks that require attention or are nearing a limit.

Error

Used for failed tasks or critical states.

Sizes

Available in three sizes: sm, md (default), and lg.

Props