Loader 10.18.1

ARIA
RTL

Loaders provide a visual cue that an action is processing awaiting a course of change or a result.

Default

By default the <Loader /> component uses hit color.

"use client";

import { Loader } from "@heathmont/moon-core-tw";

const Default = () => <Loader />;

export default Default;

    Sizes

    It supports five different sizes. By default, if not specified by the prop size, it renders as medium.


    The possible values is 2xs (2 extra small), xs (extra small), sm (small), md (medium, default), lg (large).

    "use client";

import { Loader } from "@heathmont/moon-core-tw";

const Sizes = () => (
  <>
    <Loader size="2xs" />
    <Loader size="xs" />
    <Loader size="sm" />
    <Loader />
    <Loader size="lg" />
  </>
);

export default Sizes;

      Colors

      By using the prop color is possible to pass any CSS border color class to customize the loader.

      "use client";

import { Loader } from "@heathmont/moon-core-tw";

const Colors = () => (
  <>
    <Loader color="border-dodoria" />
    <Loader color="border-trunks" />
    <Loader color="border-raditz" />
  </>
);

export default Colors;

        Loader

        These are props specific to the Loader component:

        Name
        Type
        Default
        color
        		stringborder-hit
        size
        		"2xl" | "xs" | "sm" | "md" | "lg"md