Primitives
Progress Bar
Animated horizontal progress bar.
Primitiveatoms
Install
npx remotion-ui@latest add progress-barInterpolates bar width from 0 to progress (0–1) over durationInFrames.
Live preview
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add progress-barImport after install
@/remotion/primitives/progress-bar- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: progress, durationInFrames, label, color, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { ProgressBar } from "@/remotion/primitives/progress-bar";
<ProgressBar progress={0.75} label="Rendering" color="#f97316" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| progress | number | animated 0→1 | Fill amount from 0 to 1. Animates when omitted. |
| durationInFrames | number | 30 | Frames to animate progress when not fixed. |
| label | string | — | Optional label shown beside the bar. |
| color | string | — | Fill color of the progress bar. |
| height | number | — | Bar height in pixels. |