progress-bar

1import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
2import { scaleFont } from "@/remotion/lib/layout";
3import {
4  resolveSpringConfig,
5  type MotionSpring,
6} from "@/remotion/lib/motion-primitive";
7import { EASING } from "@/remotion/lib/motion-tokens";
8import { EASING_ENTER } from "@/remotion/lib/timing";
9 
10export type ProgressBarProps = {
11  /** Value the bar fills to, 0–1. */
12  progress?: number;
13  /** Value the bar starts from, 0–1. */
14  from?: number;
15  durationInFrames?: number;
16  delayInFrames?: number;
17  /** Drive the fill with a spring instead of the ease-out curve. */
18  spring?: MotionSpring;
19  /** Loop a shuttle across the track — work with no known end. */
20  indeterminate?: boolean;
21  label?: string;
22  /** Percentage readout on the right of the label row. */
23  showValue?: boolean;
24  /** Override the readout text. */
25  formatValue?: (progress: number) => string;
26  /** Divide the track into equal steps. */
27  segments?: number;
28  color?: string;
29  trackColor?: string;
30  labelColor?: string;
31  /** Bar thickness. Scales with the frame by default. */
32  height?: number;
33  /** Corner radius. Defaults to a full round cap. */
34  radius?: number;
35  /** Soft light carried by the leading edge of the fill. */
36  glow?: boolean;
37  /** Width of the whole control. */
38  width?: number | string;
39  style?: React.CSSProperties;
40};
41 
42/** Seconds for one pass of the indeterminate shuttle. */
43const SHUTTLE_SECONDS = 1.6;
44const SHUTTLE_WIDTH = 0.34;
45 
46const clamp = {
47  extrapolateLeft: "clamp",
48  extrapolateRight: "clamp",
49} as const;
50 
51/**
52 * A bar that fills.
53 *
54 * It lays out inline rather than owning the frame, so it can sit in a card, a
55 * row of stats or a render queue — a primitive that fills the composition
56 * cannot be composed with anything.
57 *
58 * The fill decelerates and the leading edge carries its own light, which is
59 * what separates progress from a rectangle changing width.
60 */
61export const ProgressBar: React.FC<ProgressBarProps> = ({
62  progress = 1,
63  from = 0,
64  durationInFrames = 60,
65  delayInFrames = 0,
66  spring: springProp,
67  indeterminate = false,
68  label,
69  showValue = false,
70  formatValue,
71  segments,
72  color = "#e8b86d",
73  trackColor = "rgba(255, 255, 255, 0.08)",
74  labelColor = "rgba(248, 250, 252, 0.55)",
75  height: heightProp,
76  radius,
77  glow = true,
78  width: widthProp = "100%",
79  style,
80}) => {
81  const frame = useCurrentFrame();
82  const { width: frameWidth, fps } = useVideoConfig();
83 
84// … truncated