Loader

The Loader component provides an easy way to display a visually appealing, animated loading indicator to users, improving the perceived performance of your application.

Installation

Since OrbitUI components are copied directly into your project, you’ll add the Loader component using the OrbitUI CLI:

npx orbitkit@latest add loader

Usage

Import the Loader component and use it wherever you need a loading indicator. You can customize its appearance using the type and class props.

Preview

Code

index.astro

---
import { Loader } from "@/components/ui/loader";
---

<div class="mx-auto">
  <Loader />
</div>

The Loader component includes a comprehensive set of 46 animated icons. You can see all available types in the source code definition of LoaderType within your project.

Examples

Custom Type

Using the different type.

Preview

Code

index.astro

---
import { Loader } from "@/components/ui/loader";
---

<div class="mx-auto">
  <Loader type="blocks-scale" />
</div>

Custom Color

specific Tailwind color class

Preview

Code

index.astro

---
import { Loader } from "@/components/ui/loader";
---

<div class="mx-auto">
  <Loader class="text-blue-400" type="3-dots-bounce" />
</div>

Custom Size

Setting a larger size.

Preview

Code

index.astro

---
import { Loader } from "@/components/ui/loader";
---

<div class="mx-auto">
  <Loader class="text-blue-400" type="3-dots-bounce" size={128} />
</div>

Props

Loader

The Loader component accepts the following props for customization. It is rendered as an inline SVG element.

Prop	Type	Default
type	LoaderType (Union of 46 string types)	180-ring
size	number	32

• type: Specifies the specific animated SVG icon to render.
• size: Sets the width and height of the SVG element in pixels.

This component accepts all the standard HTML attributes that a <svg> element would.

Credits

The SVG animated icons used in the OrbitUI Loader component are based on the excellent work by Utkarsh Verma.