Processing Card

Animated processing card with glitch effects, progress tracking, and status indicators

ComponentGeneration.tsx

Initializing...

[

░░░░░░░░░░░░░░░░░░░░

]0%

Install the component using the shadcn CLI:

npx shadcn@latest add @uimix/processing-card

npx shadcn@latest add @uimix/processing-card

This will automatically add the component to your project.

Copy and paste the following code into your project:

Loading source…

Dependencies

npm install framer-motion lucide-react

ASCII Glitch Effect: Animated ASCII character background with customizable colors and speed
Progress Tracking: Visual progress bar with percentage display
Stage Indicators: Dynamic stage labels (Initializing, Analyzing, Generating, etc.)
Status States: Support for queued, running, succeeded, and failed states
Custom Loader: Animated orbital loader for running state
Dark Theme: Modern dark design with blue accent colors
Smooth Animations: Framer Motion powered transitions and effects

Loading source…

Prop	Type	Default	Description
name	string	undefined	Name displayed in the card header
status	'queued' \| 'running' \| 'succeeded' \| 'failed'	undefined	Current processing status
progress	number	undefined	Progress percentage (0-100)
className	string	undefined	Additional CSS classes to apply to the root element

<ProcessingCard 
  name="UserAuthentication"
  status="queued"
  progress={0}
/>

<ProcessingCard 
  name="DataProcessing"
  status="running"
  progress={45}
/>

<ProcessingCard 
  name="BuildComplete"
  status="succeeded"
  progress={100}
/>

<ProcessingCard 
  name="ValidationFailed"
  status="failed"
  progress={0}
/>