Circular Loader
A customizable circular loader component for Remotion.
A simple, animated circular loading indicator with a text label in the center.
Installation
CLI
Manual
Create a new file, for example, at src/components/clippkit/circular-loader.tsx
(or your preferred location) and paste the following code into it.
Usage
Once the CircularLoader
component is added to your project (either via CLI or Manually), you can integrate it into your Remotion project by importing it and defining a Composition
.
Prerequisite
Ensure you have a Remotion project set up. If not, please refer to the Remotion documentation to get started.
Project Structure Example
Here’s an example folder layout showing where to place the component and how it fits into a typical Remotion project
Define a Composition
In your Remotion project's entry file (commonly src/Root.tsx
, src/index.tsx
, app/main.tsx
), import CircularLoader
and define a Composition
.
API Reference
The component exported as CircularLoader
(e.g., from apps/docs/registry/default/ui/circular-loader.tsx
or your project's component path) accepts the following props to customize its appearance and animation:
Prop | Type | Default | Description |
---|---|---|---|
loadingText | string | "Loading..." | The text displayed in the center of the loader. |
circleColor | string | "var(--foreground)" | The color of the spinning part of the circular loader. |
textColor | string | "var(--foreground)" | The color of the loading text. |
size | number | 100 | The diameter of the circular loader in pixels. |
strokeWidth | number | size / 10 | The thickness of the spinning circle. |
trackColor | string | "var(--muted)" | The color of the track or background of the circular loader. |
containerStyle | React.CSSProperties | {} | Custom styles for the main container div. |
hideText | boolean | false | Controls the visibility of the loading text. |
speed | number | 1 | Multiplier for the animation speed. Default is 1 (1 rotation per second for a typical 30fps setup). |