Loader

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 nameTypeDefaultDescription
themeLoaderThemeThe theme to be applied to the component.
colorColors'secondary'The color of the loader.
sizeMainSizes'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;
}

Since February 21, 2024

Proudly Open Source
  • Npm

  • Github

  • Creator

  • Made with love and Pol-ui by Pol Gubau Amores