Loader | Pol-ui - A beautiful and functional UI library for React and Next.js

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

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;
}