Loader 10.17.4
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 | string | border-hit |
size | "2xl" | "xs" | "sm" | "md" | "lg" | md |