Skip to main content
This snippet demonstrates how to create a smooth animated progress bar that fills from 0 to 100%, perfect for loading screens, process visualizations, or time-based indicators.

​
What This Snippet Demonstrates

  • Linear progress animations using interpolate
  • Smooth fade-in effects
  • Gradient fills for visual appeal
  • Real-time percentage display
  • Clamping values to prevent overflow

​
Complete Code

import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate } from "remotion";

export const MyAnimation = () => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();

  const progress = interpolate(
    frame,
    [0, durationInFrames * 0.8],
    [0, 100],
    { extrapolateRight: "clamp" }
  );

  const opacity = interpolate(
    frame,
    [0, 20],
    [0, 1],
    { extrapolateRight: "clamp" }
  );

  return (
    <AbsoluteFill
      style={{
        backgroundColor: "#1a1a1a",
        justifyContent: "center",
        alignItems: "center",
        opacity,
      }}
    >
      <div style={{ width: 600 }}>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            marginBottom: 16,
          }}
        >
          <span
            style={{
              color: "#fff",
              fontSize: 24,
              fontFamily: "system-ui, sans-serif",
            }}
          >
            Loading...
          </span>
          <span
            style={{
              color: "#10b981",
              fontSize: 24,
              fontWeight: "bold",
              fontFamily: "system-ui, sans-serif",
            }}
          >
            {Math.round(progress)}%
          </span>
        </div>
        <div
          style={{
            width: "100%",
            height: 24,
            backgroundColor: "#333",
            borderRadius: 12,
            overflow: "hidden",
          }}
        >
          <div
            style={{
              width: `${progress}%`,
              height: "100%",
              background: "linear-gradient(90deg, #10b981, #34d399)",
              borderRadius: 12,
              transition: "width 0.1s ease-out",
            }}
          />
        </div>
      </div>
    </AbsoluteFill>
  );
};

​
Key Concepts

​
Progress Interpolation

The progress bar fills to 100% over 80% of the video duration: 
const progress = interpolate(
  frame,
  [0, durationInFrames * 0.8],
  [0, 100],
  { extrapolateRight: "clamp" }
);
Using extrapolateRight: "clamp" ensures the progress never exceeds 100%, even in later frames.

​
Fade-In Effect

The entire scene fades in over the first 20 frames: 
const opacity = interpolate(
  frame,
  [0, 20],
  [0, 1],
  { extrapolateRight: "clamp" }
);

​
Dynamic Width

The progress bar width is controlled by the interpolated progress value: 
width: `${progress}%`

​
Gradient Fill

A horizontal gradient creates visual depth: 
background: "linear-gradient(90deg, #10b981, #34d399)"

​
When to Use This Pattern

  • Loading screens and splash animations
  • Rendering progress indicators
  • Time-based process visualizations
  • Tutorial progress tracking
  • Skill level indicators
  • Download or upload progress displays
  • Achievement or goal completion animations

​
Customization Tips

  • Change the completion percentage by adjusting durationInFrames * 0.8 (currently 80%)
  • Customize colors in the gradient to match your brand
  • Replace the linear interpolation with a spring for bounce effects
  • Add multiple progress bars to show parallel processes
  • Change the text from “Loading…” to match your use case
  • Adjust the bar height and width to fit different layouts
  • Add sound effects when the progress reaches certain milestones
  • Use Easing functions for non-linear progress (e.g., ease-in-out)

Build docs developers (and LLMs) love

Get started for freeTalk to us