Loader

A loader for displaying loading state of a page or a section.

import { Loader } from "rizzui";

Default

The default style of the Loader component.

import { Loader } from "rizzui";

export default function App() {
  return <Loader />;
}

Variants

You can use different variants of our Loader component.

import { Loader } from "rizzui";

export default function App() {
  return (
    <>
      <Loader />
      <Loader variant="spinner" />
      <Loader variant="pulse" />
      <Loader variant="threeDot" />
    </>
  );
}

Sizes

You can change the size of the Loader with property size.

import { Loader } from "rizzui";

export default function App() {
  return (
    <>
      <Loader size="sm" />
      <Loader />
      <Loader size="lg" />
      <Loader size="xl" />
    </>
  );
}

Colors

You can change the color of the Loader with property color.

import { Loader } from "rizzui";

export default function App() {
  return (
    <>
      <Loader />
      <Loader color="primary" />
      <Loader color="secondary" />
      <Loader color="info" />
      <Loader color="warning" />
      <Loader color="danger" />
      <Loader color="success" />
    </>
  );
}

API Reference

---

Loader Props

Here is the API documentation of the Loader component.

Props	Type	Description	Default
size	LoaderSizes	Set loader size	"md"
color	LoaderColors	Change Loader color	"current"
className	string	Add custom classes for extra style	__

Loader Tags

type LoaderTags = "div" | "span";

Loader Sizes

type LoaderSizes = "sm" | "md" | "lg" | "xl";

Loader Colors

type LoaderColors =
  | "current"
  | "primary"
  | "secondary"
  | "danger"
  | "info"
  | "success"
  | "warning";