Progress Bar
Inline progress bar with determinate and indeterminate modes, segments and a value readout.
PrimitivePrimitives
progress-bar30fps · 960×540
Install
$ npx remotion-ui@latest add progress-barFills from from to progress on an ease-out, with the leading edge carrying its own light — what separates progress from a rectangle changing width.
It lays out inline rather than filling the frame, so it composes inside a card or a stat row. indeterminate loops a shuttle across the track for work with no known end.
Lays out inline rather than filling the frame, so it composes inside a card or a stat row.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/progress-bar- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: progress, from, durationInFrames, delayInFrames, 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
Example
import { ProgressBar } from "@/remotion/primitives/progress-bar";
<ProgressBar progress={0.75} label="Rendering" showValue segments={4} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| progress | number | 1 | Value the bar fills to, 0–1. |
| from | number | 0 | Value the bar starts from, 0–1. |
| durationInFrames | number | 60 | Frames the fill takes. |
| delayInFrames | number | 0 | Frames before the fill starts. |
| spring | MotionSpring | - | Drive the fill with a spring instead of the ease-out curve. |
| indeterminate | boolean | false | Loop a shuttle across the track — work with no known end. |
| label | string | - | Label above the track. |
| showValue | boolean | false | Percentage readout on the right of the label row. |
| formatValue | (progress: number) => string | - | Override the readout text. |
| segments | number | - | Divide the track into equal steps. |
| color | string | "#e8b86d" | Fill colour. |
| trackColor | string | - | Colour of the empty track. |
| labelColor | string | - | Colour of the label row. |
| height | number | scaled 12px | Bar thickness in pixels. |
| radius | number | height | Corner radius. |
| glow | boolean | true | Soft light carried by the leading edge of the fill. |
| width | number | string | "100%" | Width of the whole control. |