Orbit Loader React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import OrbitLoader from "./OrbitLoader";

export default function Example() {
  return (
    <OrbitLoader
      size={110}
      color={"#cebae2"}
      speed={2}
      label={"Preparing your canvas"}
      loading={true}
      children={"Ready to create."}
    />
  );
}

Using Orbit Loader

Use label to describe the operation being performed. size sets the loader's footprint and color sets the ring colour.

Use loading to switch between the loader and the content supplied through children. Keep important progress information in readable text as well.

Props

Name	Type	Required	Default	Description
size	number	No	90	Outer diameter in pixels.
color	string	No	"#d7c0e7"	Ring and centre colour.
speed	number	No	2	Base revolution duration in seconds.
label	string	No	"Loading"	Accessible loading status, also displayed beneath the rings.
loading	boolean	No	true	Show the loader when true; render children when false.
children	ReactNode	No	undefined	Content to reveal when loading completes.
className	string	No	""	Additional classes merged with component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing, typography, and appearance.