Spinner Component

A flexible and accessible React spinner component with multiple size and color variants.

Features

• Size Variants: Mini, Default, Large
• Color Variants: Default (blue), Success (green), Warning (yellow), Error (red)
• Custom Sizing: Support for custom className overrides
• Smooth Animations: Built-in CSS animations with Tailwind
• Accessibility: Proper ARIA labels and semantic markup
• TypeScript: Full type safety
• Tests: Comprehensive test coverage with Vitest (when dependencies installed)
• Storybook: Interactive documentation and testing (when dependencies installed)

Quick Demo

Open demo.html in your browser to see the spinner component in action without any installation required.

Installation & Setup

Prerequisites

• Node.js and npm installed on your system

Install Dependencies

npm install

Development Commands

Running the React App

npm run dev

Running Tests

npm test

Running Storybook

npm run storybook

Building for Production

npm run build

Building Storybook

npm run build-storybook

Usage

import { Spinner } from './components/Spinner'

// Default spinner
<Spinner />

// Size variants
<Spinner size="mini" />
<Spinner size="default" />
<Spinner size="large" />

// Color variants
<Spinner color="success" />
<Spinner color="warning" />
<Spinner color="error" />

// Custom size
<Spinner className="w-12 h-12" />

// Combined props
<Spinner size="large" color="error" className="extra-class" />

Props

Prop	Type	Default	Description
size	'mini' | 'default' | 'large'	'default'	Size of the spinner
color	'default' | 'success' | 'warning' | 'error'	'default'	Color variant
className	string	undefined	Additional CSS classes

Component Structure

src/
components/
  Spinner.tsx          # Main component
  Spinner.test.tsx     # Unit tests (requires dependencies)
  Spinner.stories.tsx  # Storybook stories (requires dependencies)
utils/
  cn.ts               # Utility for className merging

Technologies Used

• React 18 with TypeScript
• TailwindCSS for styling
• Vitest for testing
• Storybook for documentation
• Vite for development and building

Dependencies Status

The project is set up to work with or without npm dependencies installed:

• With dependencies: Full development environment with tests, Storybook, and build tools
• Without dependencies: Component works in the demo.html file using CDN versions

All external dependencies have been made optional to ensure the component works in any environment.