A Loader is a component that is used to indicate that something is loading. It can be used to show that a page is loading, that a component is fetching data, or that a button is processing an action.
Start using the Loader component by first importing it from Pol-ui:
import { Loader } from "pol-ui";
Default list group
Default Loader
import { Loader } from "pol-ui";
const LoaderComponent = () => {
return <Loader />;
};
export default LoaderComponent;
Props
The Loader component has the following props:
Prop name | Type | Default | Description |
---|---|---|---|
theme | LoaderTheme | The theme to be applied to the component. | |
color | Colors | 'secondary' | The color of the loader. |
size | MainSizes | 'md' | The size of the loader. |
You can also provide any prop comming from the HTML span tag.
Examples
Different alignments
As a span tag, it's possible to align the loader to the left, center, or right using the text-left, text-center, and text-right classes.
Example:
<div className="text-left">
<Loader aria-label="Left-aligned loader example rotate-360" />
</div>
Different alignments
import { Loader } from "pol-ui";
const LoaderComponent = () => {
return (
<div className="flex w-1/3 flex-col gap-3 p-6">
<div className="text-left">
<Loader aria-label="Left-aligned loader example rotate-360" />
</div>
<div className="text-center">
<Loader aria-label="Center-aligned loader example" />
</div>
<div className="text-right">
<Loader aria-label="Right-aligned loader example" />
</div>
</div>
);
};
export default LoaderComponent;
Different colors
Use the custom color prop to change the color of the loader. Check the Colors page to see how the colors work.
Different colors
import { Loader,ColorsEnum } from "pol-ui";
const LoaderComponent = () => {
return <div className="flex flex-row gap-3">
{Object.keys(ColorsEnum).map(color => (
<Loader
color={color as keyof typeof ColorsEnum}
key={color}
/>
))}
</div>
};
export default LoaderComponent;
Different sizes
Different sizes
import { Loader, MainSizes,MainSizesEnum } from "pol-ui";
const LoaderComponent = () => {
return ( <div className="flex flex-row gap-3">
{Object.keys(MainSizesEnum).map(v => (
<Loader size={v as MainSizes} aria-label={`${v} loader example`} key={v} title={`${v} loader example`} />
))}
</div>)
};
export default LoaderComponent;
Button examples
Some examples of how can the loaders be use with buttons.
Button examples
import { Button, Loader } from "pol-ui";
const LoaderComponent = () => {
return (
<div className="flex flex-row gap-3">
<Button rounded="full">
<Loader
aria-label="Loader button example"
className="text-secondary-50"
/>
<span className="pl-3">Loading...</span>
</Button>
<Button color="secondary">
<Loader aria-label="Alternate loader button example" />
<span className="pl-3">Loading...</span>
</Button>
</div>
);
};
export default LoaderComponent;
Theme
To learn more about how to customize the appearance of components, please see the Theme docs.
interface LoaderTheme {
base: string;
color: ColorsType;
size: MainSizesType;
}