@metadiv-studio/loader

A lightweight, customizable loading spinner component built with React and Tailwind CSS. This package provides a simple yet flexible loader that can be easily integrated into any React application.

Installation

npm install @metadiv-studio/loader

Tailwind CSS Configuration

Important: Before using this package, you must add the following path to your tailwind.config.ts file to ensure all styles are properly loaded:

// tailwind.config.ts
module.exports = {
  content: [
    // ... your existing content paths
    "./node_modules/@metadiv-studio/**/*.{js,ts,jsx,tsx}"
  ],
  // ... rest of your config
}

Usage

import { Loader } from '@metadiv-studio/loader';

function App() {
  return (
    <div className="relative">
      <Loader size="md" color="strong" />
    </div>
  );
}

Props

size (optional)

Controls the dimensions of the loader spinner.

• Type: "sm" | "md" | "lg"
• Default: "sm"
• Values:
  • "sm": 16x16 pixels (w-4 h-4)
  • "md": 24x24 pixels (w-6 h-6)
  • "lg": 32x32 pixels (w-8 h-8)

Example:

// Small loader for inline use
<Loader size="sm" />

// Medium loader for general purposes
<Loader size="md" />

// Large loader for prominent loading states
<Loader size="lg" />

color (optional)

Defines the color intensity of the spinner.

• Type: "light" | "strong"
• Default: "light"
• Values:
  • "light": Uses text-txtc-lv1 (subtle, less prominent)
  • "strong": Uses text-txtc-lv3 (more visible, higher contrast)

Example:

// Subtle loader for light backgrounds
<Loader color="light" />

// Prominent loader for better visibility
<Loader color="strong" />