Spinner

Feedback

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

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 { Spinner } from '@/components/Spinner'

Related Components

Toast

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

ProgressBar

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

← Back to Components

Spinner

Feedback

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

Dependencies:

framer-motion

Full

Variants

ring

dots

bars

pulse

orbit

Sizes

Colors

Use Cases

Button Loading

Inline Loading

Loading results

Card Loading

Full Overlay