{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "base-progress-demo", "type": "registry:ui", "title": "Base Progress Demo", "description": "Demo showing a base progress.", "registryDependencies": [ "https://animate-ui.com/r/base-progress" ], "files": [ { "path": "registry/demo/base/progress/index.tsx", "content": "'use client';\n\nimport * as React from 'react';\nimport {\n Progress,\n ProgressLabel,\n ProgressTrack,\n ProgressValue,\n} from '@/components/animate-ui/base/progress';\n\nexport const BaseProgressDemo = () => {\n const [progress, setProgress] = React.useState(0);\n\n React.useEffect(() => {\n const timer = setInterval(() => {\n setProgress((prev) => {\n if (prev >= 100) return 100;\n return prev + 25;\n });\n }, 2000);\n return () => clearInterval(timer);\n }, []);\n\n React.useEffect(() => {\n if (progress >= 100) setTimeout(() => setProgress(0), 4000);\n }, [progress]);\n\n return (\n \n
\n \n Export data\n \n \n %\n \n
\n \n
\n );\n};\n", "type": "registry:ui", "target": "components/animate-ui/demo/base/progress.tsx" } ] }