/** * Free Remotion Template Component * --------------------------------- * This template is free to use in your projects! * Credit appreciated but not required. * * Created by the team at https://www.reactvideoeditor.com * * Happy coding and building amazing videos! 🎉 */ "use client"; import { interpolate, useCurrentFrame, useVideoConfig } from "remotion"; export default function CircularProgress() { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); // Calculate progress based on frame const progress = interpolate(frame % 90, [0, 90], [0, 100], { extrapolateRight: "clamp", }); // Calculate rotation for the loading effect const rotation = (frame * 4) % 360; // Calculate radius and circumference const radius = 80; const circumference = 2 * Math.PI * radius; const strokeDashoffset = circumference - (progress / 100) * circumference; // Pulse effect const pulse = 1 + Math.sin(frame / 10) * 0.05; return (

{/* Background circle */} {/* Progress circle */} {/* Rotating dots */} {/* Percentage text */}

{Math.round(progress)}%

); }

Circular Progress

Install