Skip to content

MotionVaultAnimated UI vault

Motion Sites

Full animated website templates

Category

Site Templates→

Top tags

#landing #template #saas #hero #portfolio #terminal

Filter by tech

React Tailwind CSS JavaScript GSAP Anime.js Framer Motion

React Bits

Advanced animated components

Category

Top tags

#card #navigation #menu #cards #3d #dashboard

Filter by tech

React Tailwind CSS JavaScript GSAP Anime.js Framer Motion

Uiverse

Buttons, loaders, toggles

Category

Top tags

#form #button #input #loader #hover #toggle

Filter by tech

React Tailwind CSS JavaScript GSAP Anime.js Framer Motion

Anime.js

Spring, drag & scroll motion

Category

Top tags

#canvas #text #scroll #hover #particles #glow

Filter by tech

React Tailwind CSS JavaScript GSAP Anime.js Framer Motion

Aceternity UI

Glow cards, tilt, starfield…

Category

Top tags

#card #navigation #menu #cards #3d #dashboard

Filter by tech

React Tailwind CSS JavaScript GSAP Anime.js Framer Motion

Motion Sites React Bits Uiverse Anime.js Aceternity UI Hall1246 · 375,921

1246 assets · 375,921 prompts copied

Home/Tags/#progress

Tag collection

#progress

35 animated progress assets — each with a live preview, copy-paste HTML/CSS/JS source and a ready-made AI prompt.

UI Elements15 Animations14 Components6 All tags →

Related tags — click to cross-filter

#bar+12 #loading+12 #scroll+9 #upload+9 #cinematic+8 #scrub+8 #story+8 #ring+6 #percent+5 #steps+5 #wizard+4 #candy-pink+2 #checkout+2 #circle+2

All vaults Site Templates Components UI Elements Animations

#bar 12 #loading 12 #scroll 9 #upload 9 #cinematic 8 #scrub 8 #story 8 #ring 6 #percent 5 #steps 5 #wizard 4 #candy-pink 2

35 assets tagged #progress

Components⚛ TSX Live preview

Top Page-Load Progress Bar

A YouTube/NProgress-style bar: starts fast, trickles toward 90%, then snaps complete with a glow head.

HTMLCSSJavaScriptAdvanced

5.7k29.4k6.1kOpen

UI Elements⚛ TSX Live preview

Animated Gradient Progress Rings

Three SVG rings that stroke-draw to 82/64/95% with glow and count-up labels.

HTMLCSSJavaScriptAdvanced

3.7k28.5k6.7kOpen

Animations Live preview

Particle Progress Ring Loader

A ring of 60 particles flowing around a track that fills with a breathing percentage readout.

HTMLCSSJavaScriptModerate

Animations Live preview

Loading bar with percent + rotating tips

Gradient shimmer progress bar with a huge mono percentage and contextual tips that change per phase.

HTMLCSSJavaScriptModerate

Components Live preview

Gradient stepper progress nav

4-step wizard indicator: numbered nodes light up with gradient borders as the fill bar advances.

HTMLCSSJavaScriptModerate

Animations Live preview

Circular progress ring

SVG ring fills with a glowing fuchsia arc and mono percentage — +10% and reset buttons animate it.

HTMLCSSJavaScriptModerate

Featured UI Elements Live preview

Striped Progress Bar · Rose Gold

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Rose Gold palette.

HTMLCSSJavaScriptModerate

UI Elements Live preview

Striped Progress Bar · Ocean Sky

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Ocean Sky palette.

HTMLCSSJavaScriptModerate

UI Elements Live preview

Striped Progress Bar · Mint Breeze

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Mint Breeze palette.

HTMLCSSJavaScriptModerate

UI Elements Live preview

Striped Progress Bar · Candy Pink

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Candy Pink palette.

HTMLCSSJavaScriptModerate

UI Elements Live preview

Striped Progress Bar · Royal Gold

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Royal Gold palette.

HTMLCSSJavaScriptModerate

UI Elements Live preview

Striped Progress Bar · Crimson Heat

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Crimson Heat palette.

HTMLCSSJavaScriptModerate

UI Elements Live preview

Striped Progress Bar · Deep Indigo

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Deep Indigo palette.

HTMLCSSJavaScriptModerate

UI Elements Live preview

Striped Progress Bar · Aurora Teal

A gradient progress bar with animated candy stripes and a rolling percentage counter. Rendered in the Aurora Teal palette.

HTMLCSSJavaScriptModerate

Animations Live preview

Scrub Story Strip · Ultra Violet

A cinematic progress strip: three captions scrub across in sequence with a page-progress bar — like scroll, hands-free. Rendered in the Ultra Violet palette.

HTMLCSSJavaScriptModerate

Animations Live preview

Scrub Story Strip · Cyber Lime

A cinematic progress strip: three captions scrub across in sequence with a page-progress bar — like scroll, hands-free. Rendered in the Cyber Lime palette.

HTMLCSSJavaScriptModerate

Animations Live preview

Scrub Story Strip · Sunset Amber

A cinematic progress strip: three captions scrub across in sequence with a page-progress bar — like scroll, hands-free. Rendered in the Sunset Amber palette.

HTMLCSSJavaScriptModerate

Animations Live preview

Scrub Story Strip · Rose Gold

A cinematic progress strip: three captions scrub across in sequence with a page-progress bar — like scroll, hands-free. Rendered in the Rose Gold palette.

HTMLCSSJavaScriptModerate

Animations Live preview

Scrub Story Strip · Ocean Sky

A cinematic progress strip: three captions scrub across in sequence with a page-progress bar — like scroll, hands-free. Rendered in the Ocean Sky palette.

HTMLCSSJavaScriptModerate

Animations Live preview

Scrub Story Strip · Mint Breeze

A cinematic progress strip: three captions scrub across in sequence with a page-progress bar — like scroll, hands-free. Rendered in the Mint Breeze palette.

HTMLCSSJavaScriptModerate

Animations Live preview

Scrub Story Strip · Candy Pink

A cinematic progress strip: three captions scrub across in sequence with a page-progress bar — like scroll, hands-free. Rendered in the Candy Pink palette.

HTMLCSSJavaScriptModerate

Animations Live preview

Scrub Story Strip · Royal Gold

A cinematic progress strip: three captions scrub across in sequence with a page-progress bar — like scroll, hands-free. Rendered in the Royal Gold palette.

HTMLCSSJavaScriptModerate

Components Live preview

Progress Steps Wizard

Multi-step progress indicator with checkmarks and connecting bar animation.

HTMLCSSJavaScriptModerate

Components Live preview

File Upload Dropzone

Drag-and-drop upload zone with file preview, progress and success state.

HTMLCSSJavaScriptModerate

Components Live preview

Achievement Badge Grid

Gamified achievement grid with locked/unlocked badges and progress.

Components Live preview

Loading Overlay State

Full-screen loading overlay with spinner, progress and shimmer text.

UI Elements Live preview

Progress Bar Loading

Determinate progress bar with striped animation and percentage.

UI Elements Live preview

Scroll Progress Bar

Thin progress bar pinned to top showing scroll position.

HTMLCSSJavaScriptModerate

UI Elements Live preview

Percentage Ring

Circular progress ring showing a percentage with animated arc.

HTMLCSSJavaScriptModerate

Animations Live preview

Progress Ring Count-up

Animated circular progress with count-up percentage.

HTMLCSSJavaScriptModerate

Animations Live preview

Progress Steps Pulse

Stepped progress with pulsing current step and checkmarks.

UI Elements⚛ TSX Live preview

Checkout Progress Steps

Multi-step progress indicator with completed checks and animated connector.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Progress Bar with Percent

Determinate progress bar with percent readout and striped animation.

HTMLCSSJavaScriptAdvanced

UI Elements⚛ TSX Live preview

Install Wizard Steps

Install steps with terminal ticks, current pulse and done checks.

HTMLCSSJavaScriptAdvanced

Animations⚛ TSX Live preview

Animated Percent Rings

Circular rings filling to percentages with counting text.

HTMLCSSJavaScriptAdvanced

MotionVault

The treasure vault for animated web design. Full site templates, advanced components, UI micro-elements and animation snippets — each with live preview, source code and an AI prompt. Inspired by Motion Sites, React Bits, Uiverse, Anime.js and Aceternity UI.

1246 items582k stars376k copies

Vault sections

Site Templates
Components
UI Elements
Animations

More

Explore everything
Favorites
Submit
Privacy
Roadmap
Support
Accessibility
Built with Next.js · Tailwind

© 2026 MotionVault — curated for builders who ship.·🎲 Surprise me·v2.0.0

35 animated progress components & code snippets · MotionVault