A presentation-only timeline showing one file or item moving through ordered processing stages like scan, transcode, thumbnail, and publish, with per-stage status, progress, logs, and retry/skip/cancel controls.
"use client";
import * as React from "react";
import ProcessingTimeline, {
type ProcessingStage,
} from "@/components/ui/processing-timeline";
const STAGES: ProcessingStage[] = [
{
id: "upload",
label: "Upload received",
description: "Persist the source file and register the processing job.",
status: "completed",
duration: 1200,
},
{
id: "scan",
label: "Virus scan",
description: "Scan the source against the malware signature database.",
status: "completed",
duration: 3400,
},
{
id: "transcode",
label: "Transcoding",
description: "Produce adaptive renditions (1080p, 720p, 480p).",
status: "active",
progress: 46,
},
{
id: "thumbnail",
label: "Thumbnail generation",
description: "Sample keyframes and pick a representative poster frame.",
status: "pending",
},
{
id: "caption",
label: "Caption extraction",
description: "Transcribe audio and align caption cues.",
status: "pending",
skippable: true,
},
{
id: "publish",
label: "Publishing",
description: "Attach renditions to the asset and expose it to the CDN.",
status: "pending",
},
];
export default function ProcessingTimelineDemo() {
return (
<div className="w-full max-w-xl">
<ProcessingTimeline
title="clip-2043.mov"
subtitle="1080p master · 640 MB"
stages={STAGES}
currentStageId="transcode"
/>
</div>
);
}
Part of Motiq — browse the full library on 21st.dev.