ProgressBar

Feedback

Animated progress indicator with multiple variants including circular and step progress.

Dependencies:

framer-motion

Full

Preview

Interactive

Installation

1. Install dependencies

npm install framer-motion

2. Copy the component

Copy the source code from the Code tab above and save it to your components folder.

3. Import and use

import { ProgressBar } from '@/components/ProgressBar'

Related Components

Toast

Animated toast notifications with multiple variants, auto-dismiss, and customizable positioning.

Spinner

Animated loading spinner with multiple visual variants including ring, dots, bars, pulse, and orbit animations.

← Back to Components

ProgressBar

Feedback

Animated progress indicator with multiple variants including circular and step progress.

Dependencies:

framer-motion

Full

Linear Progress

Default

Striped

65%

Gradient

85%

Sizes

Circular Progress

25%

50%

75%

100%

Step Progress

Interactive

Preview

Interactive

Installation

1. Install dependencies

npm install framer-motion

2. Copy the component

Copy the source code from the Code tab above and save it to your components folder.

3. Import and use

import { ProgressBar } from '@/components/ProgressBar'

Related Components

Toast

Animated toast notifications with multiple variants, auto-dismiss, and customizable positioning.

Spinner

Animated loading spinner with multiple visual variants including ring, dots, bars, pulse, and orbit animations.

← Back to Components