Loading Utilities

Utility functions for generating loading spinner classes with different types and sizes.

Import

import { getLoadingClasses } from "amvasdev-ui";

Functions

getLoadingClasses

Returns the class names for a loading spinner with specified type and size

getLoadingClasses(options): string

Parameters:

  • options (optional) - Loading spinner options

Returns: string - Loading-specific class names

Interactive Demo

Preview:

Generated Classes:

ui:loading-spinner ui:loading-md

All Loading Types

spin

dots

ring

ball

bars

infinity

Examples

Basic Loading Spinner

import { getLoadingClasses } from "amvasdev-ui";

const loadingClasses = getLoadingClasses({
  type: "spin",
  size: "md",
});

<span className={`loading ${loadingClasses}`} />

Different Loading Types

import { getLoadingClasses } from "amvasdev-ui";

// Spinning loader
const spinClasses = getLoadingClasses({ type: "spin", size: "lg" });
<span className={`loading ${spinClasses}`} />

// Dots loader
const dotsClasses = getLoadingClasses({ type: "dots", size: "md" });
<span className={`loading ${dotsClasses}`} />

// Ring loader
const ringClasses = getLoadingClasses({ type: "ring", size: "sm" });
<span className={`loading ${ringClasses}`} />

Custom Loading Button

import { getLoadingClasses } from "amvasdev-ui";

function LoadingButton({ isLoading, children, ...props }) {
  const loadingClasses = getLoadingClasses({ type: "spin", size: "sm" });

  return (
    <button {...props} disabled={isLoading}>
      {isLoading && <span className={`loading ${loadingClasses} mr-2`} />}
      {children}
    </button>
  );
}

Full Page Loader

import { getLoadingClasses } from "amvasdev-ui";

function FullPageLoader() {
  const loadingClasses = getLoadingClasses({ type: "infinity", size: "lg" });

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-base-100/80">
      <span className={`loading ${loadingClasses} text-primary`} />
    </div>
  );
}

Notes

  • Available types: spin, dots, ring, ball, bars, infinity
  • Available sizes: xs, sm, md, lg
  • Loading spinners use the 'loading' base class from daisyUI