Screen Loader
A loader animation that travels around the border of its container.
A component that displays a small square animating along the perimeter of its parent container.
Installation
CLI
Manual
Create a new file, for example, at src/components/clippkit/screen-loader.tsx
(or your preferred location) and paste the following code into it.
Usage
Once the ScreenLoader
component is added to your project (either via CLI or Manually), you can integrate it into your Remotion compositions. The ScreenLoader
requires a parent container with specific dimensions and position: relative
for it to animate correctly along its border.
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 ScreenLoader
and define a Composition
. You'll need to wrap ScreenLoader
in a container that provides the containerWidth
and containerHeight
dimensions.
API Reference
The ScreenLoader
component accepts the following props:
Prop | Type | Default | Description |
---|---|---|---|
loaderSize | number | 20 | The size (width and height) of the moving square loader in pixels. |
loaderColor | string | "blue" | The background color of the loader. |
containerWidth | number | Required | The width of the container within which the loader will animate. The loader moves along the border of this area. |
containerHeight | number | Required | The height of the container within which the loader will animate. |
durationInFrames | number | 120 | The total number of frames for one complete loop of the loader around the container. |
loop | boolean | true | If true , the loader animation will loop indefinitely. If false , it will play once. |