jelly progress

preview

pink20%

blue33%

green46%

yellow59%

orange72%

red85%

usage

Pass current progress and optionally animate the stripe overlay for an active operation.

import { JellyProgress } from "@/components/jelly/jelly-progress"

export function UploadProgress() {
  return <JellyProgress color="blue" value={64} label="uploading" animated />
}

setup notes

Requires React, TypeScript, Tailwind CSS, and the included cn helper.

Add this keyframe when using the animated stripe option:

@keyframes slide {
  0% { background-position: 0 0; }
  100% { background-position: 32px 0; }
}

props

prop	type	default	purpose
value	number	-	Sets the current completed value.
max	number	100	Sets the completed total.
color	"pink" \| "blue" \| "green" \| "yellow" \| "orange" \| "red"	"pink"	Sets the fill and track tint.
label	string	-	Displays a progress label.
animated	boolean	false	Animates moving stripes in the fill.