---
sidebar_position: 2
---

import { Loader } from "rizzui";
import Paper from "@site/src/components/paper";

# Loader

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

```jsx
import { Loader } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of the **Loader** component.

<Paper>
  <Loader />
</Paper>

```jsx
import { Loader } from "rizzui";

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

<div className="mb-16" />

## Variants

You can use different variants of our **Loader** component.

<Paper>
  <div className="flex items-center justify-around gap-3 w-full">
    <Loader className="w-7 h-auto" />
    <Loader variant="spinner" className="w-7 h-auto" />
    <Loader variant="pulse" className="w-7 h-auto" />
    <Loader variant="threeDot" className="w-7 h-auto" />
  </div>
</Paper>

```jsx
import { Loader } from "rizzui";

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

<div className="mb-16" />

## Sizes

You can change the size of the **Loader** with property [**size**](#loader-sizes).

<Paper>
  <div className="flex items-center justify-around gap-3 w-full">
    <Loader size="sm" />
    <Loader />
    <Loader size="lg" />
    <Loader size="xl" />
  </div>
</Paper>

```jsx
import { Loader } from "rizzui";

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

<div className="mb-16" />

## Colors

You can change the color of the **Loader** with property [**color**](#loader-colors).

<Paper>
  <div className="flex items-center justify-around gap-3 w-full">
    <Loader />
    <Loader color="primary" />
    <Loader color="secondary" />
    <Loader color="info" />
    <Loader color="warning" />
    <Loader color="danger" />
    <Loader color="success" />
  </div>
</Paper>

```jsx
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" />
    </>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Loader Props

Here is the API documentation of the Loader component.

<div className="overflow-x-auto">

|   Props   |              Type              |            Description             |   Default   |
| :-------: | :----------------------------: | :--------------------------------: | :---------: |
|   size    |  [LoaderSizes](#loader-sizes)  |          Set loader size           |   `"md"`    |
|   color   | [LoaderColors](#loader-colors) |        Change Loader color         | `"current"` |
| className |            `string`            | Add custom classes for extra style |    \_\_     |

</div>

<div className="mb-10" />

### Loader Tags

```ts
type LoaderTags = "div" | "span";
```

<div className="mb-10" />

### Loader Sizes

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

<div className="mb-10" />

### Loader Colors

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