Bar Loader
A customizable bar loader component for Remotion.
A simple, animated loading bar with a text label.
Installation
CLI
Manual
Create a new file, for example, at src/components/clippkit/bar-loader.tsx
(or your preferred location) and paste the following code into it.
Usage
Once the BarLoader
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 BarLoader
and define a Composition
.
API Reference
The component exported as BarLoader
(e.g., from apps/docs/registry/default/ui/bar-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 above the loading bar. |
barColor | string | "var(--foreground)" | The color of the loading bar. |
textColor | string | "var(--foreground)" | The color of the loading text. |
width | string | number | Video config width | The width of the component. Can be a number (pixels) or a string (e.g., "50%"). |
height | string | number | Video config height / 4 | The height of the component. Can be a number (pixels) or a string (e.g., "25%"). |
containerStyle | React.CSSProperties | {} | Custom styles for the main container div. |
hideText | boolean | false | Controls the visibility of the loading text. |
barBorderRadius | string | number | barHeight / 2 | The border radius of the progress bar and its track. |
trackColor | string | "var(--muted)" | The color of the loading bar's track. |
barHeight | string | number | Calculated | The height of the progress bar. Can be a number (pixels), percentage, or pixel string. |