{"id":34957219,"url":"https://github.com/ishansasika/premium-react-loaders","last_synced_at":"2026-01-18T01:02:13.026Z","repository":{"id":329913168,"uuid":"1120961963","full_name":"ishansasika/premium-react-loaders","owner":"ishansasika","description":"Premium React Loaders - A comprehensive collection of premium, production-ready loading components for React applications. Built with TypeScript and Tailwind CSS for maximum flexibility and customization.","archived":false,"fork":false,"pushed_at":"2026-01-13T16:23:19.000Z","size":378,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-13T18:38:47.227Z","etag":null,"topics":["loader","loader-plugin","loaders","npm-package","skeleton","skeleton-loader","skeleton-loading"],"latest_commit_sha":null,"homepage":"https://premium-react-loaders.ishansasika.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ishansasika.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-22T08:10:24.000Z","updated_at":"2026-01-13T16:22:37.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ishansasika/premium-react-loaders","commit_stats":null,"previous_names":["ishansasika/premium-react-loaders"],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/ishansasika/premium-react-loaders","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ishansasika%2Fpremium-react-loaders","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ishansasika%2Fpremium-react-loaders/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ishansasika%2Fpremium-react-loaders/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ishansasika%2Fpremium-react-loaders/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ishansasika","download_url":"https://codeload.github.com/ishansasika/premium-react-loaders/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ishansasika%2Fpremium-react-loaders/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28525437,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"ssl_error","status_checked_at":"2026-01-18T00:39:39.467Z","response_time":85,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["loader","loader-plugin","loaders","npm-package","skeleton","skeleton-loader","skeleton-loading"],"created_at":"2025-12-26T22:21:14.278Z","updated_at":"2026-01-18T01:02:12.990Z","avatar_url":"https://github.com/ishansasika.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Premium React Loaders\n\nA comprehensive collection of **40 premium, production-ready loading components** for React applications. Built with TypeScript and custom CSS for maximum flexibility and zero configuration.\n\n[![npm version](https://img.shields.io/npm/v/premium-react-loaders.svg)](https://www.npmjs.com/package/premium-react-loaders)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n## Demo\n\n🚀 **[Interactive Demo](https://premium-react-loaders.ishansasika.dev/)** - Playground with live controls and component customization\n\n📚 **[Storybook Documentation](https://docs.premium-react-loaders.ishansasika.dev/)** - Detailed component documentation and examples\n\nSee all 40 components in action with interactive examples and customization options.\n\n## Features\n\n- **40 Premium Components** across 13 categories (Skeleton, Spinner, Progress, Pulse, Overlay, Button, Status, Transition, Shimmer, Orbit, Bounce, Infinity, Text)\n- **Global Theming** - ThemeProvider for app-wide customization ✨ *New in v2.1.0*\n- **Smart Loading UX** - useLoader hook with delay, minDuration, and autoHide ✨ *New in v2.1.0*\n- **Enhanced CSS Variables** - Comprehensive theming with dark mode support ✨ *New in v2.1.0*\n- **Zero Configuration** - No Tailwind or build setup required ✨ *New in v2.0.0*\n- **Tiny Bundle Size** - 70% smaller CSS (6.27 KB → 1.64 KB gzipped) ✨ *New in v2.0.0*\n- **Zero Runtime Dependencies** - No external dependencies needed ✨ *New in v2.0.0*\n- **Size Presets** - Easy sizing with `xs`, `sm`, `md`, `lg`, `xl` presets\n- **Reduced Motion Support** - Respects `prefers-reduced-motion` for accessibility\n- **Animation Direction Control** - Reverse animations with `reverse` prop\n- **Full TypeScript Support** with exported type definitions\n- **Tree-shakeable** - only bundle what you use\n- **Accessible** - built with ARIA labels and best practices\n- **Performant** - hardware-accelerated CSS animations (60fps)\n- **Customizable** - multiple ways to style components\n\n## Installation\n\n```bash\nnpm install premium-react-loaders\n```\n\n### Peer Dependencies\n\nThis library only requires React:\n\n```bash\nnpm install react react-dom\n```\n\n\u003e **Note:** v2.0.0+ no longer requires Tailwind CSS! See [Migration Guide](#migrating-from-v1x-to-v20) below.\n\n## Setup\n\nImport the styles in your main entry file (e.g., `main.tsx` or `App.tsx`):\n\n```typescript\nimport 'premium-react-loaders/styles';\n```\n\nThat's it! No Tailwind configuration or additional setup needed.\n\n### Optional: Global Theming (v2.1.0+)\n\nWrap your app with `ThemeProvider` to customize all loaders globally:\n\n```tsx\nimport { ThemeProvider } from 'premium-react-loaders';\n\nfunction App() {\n  return (\n    \u003cThemeProvider\n      theme={{\n        primaryColor: '#8b5cf6',\n        secondaryColor: '#ec4899',\n        defaultSize: 'lg',\n        defaultSpeed: 'fast',\n      }}\n    \u003e\n      \u003cYourApp /\u003e\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\n## Quick Start\n\n```tsx\nimport {\n  Skeleton,\n  SkeletonCard,\n  SpinnerCircle,\n  ProgressBar,\n  PulseDots,\n} from 'premium-react-loaders';\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      {/* Skeleton Loaders */}\n      \u003cSkeleton width={200} height={20} /\u003e\n      \u003cSkeletonCard hasAvatar lines={3} /\u003e\n\n      {/* Spinners with Size Presets (v1.2.0+) */}\n      \u003cSpinnerCircle size=\"lg\" color=\"#3b82f6\" /\u003e\n      \u003cSpinnerCircle size=\"md\" reverse /\u003e {/* Reverse animation */}\n\n      {/* Progress Bars */}\n      \u003cProgressBar value={75} showValue /\u003e\n      \u003cProgressBar indeterminate reverse /\u003e {/* Reverse sweep */}\n\n      {/* Pulse Loaders */}\n      \u003cPulseDots size=\"sm\" dotCount={3} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Component Categories\n\n### Skeleton Loaders (9 components)\n\nPlaceholder components that mimic content layout while loading:\n\n- **Skeleton** - Base skeleton component with variants\n- **SkeletonText** - Multi-line text placeholder\n- **SkeletonAvatar** - Avatar placeholder (circle/square)\n- **SkeletonImage** - Image placeholder with aspect ratio\n- **SkeletonCard** - Card layout with avatar + text\n- **SkeletonForm** - Form skeleton with inputs and labels\n- **SkeletonList** - List of skeleton items\n- **SkeletonTable** - Table skeleton with rows/columns\n- **SkeletonPage** - Pre-built full page layouts (default, dashboard, article, profile)\n\n### Spinner Loaders (7 components)\n\nRotating and animated spinners:\n\n- **SpinnerCircle** - Basic rotating circle spinner\n- **SpinnerRing** - Border-only ring spinner\n- **SpinnerDots** - Multiple dots rotating around center\n- **SpinnerBars** - Vertical bars with wave animation\n- **SpinnerGrid** - Grid of fading squares\n- **SpinnerPulse** - Pulsing circle spinner\n- **SpinnerWave** - Wave pattern spinner\n\n### Progress Loaders (4 components)\n\nProgress indicators (determinate/indeterminate):\n\n- **ProgressBar** - Linear horizontal progress bar\n- **ProgressCircle** - Circular progress indicator\n- **ProgressRing** - Ring progress with gradient option\n- **ProgressSteps** - Multi-step progress indicator\n\n### Pulse Loaders (4 components)\n\nBouncing, pulsing, wave animations:\n\n- **PulseDots** - Bouncing dots in sequence\n- **PulseWave** - Wave pattern bars\n- **PulseBars** - Equalizer-style pulsing bars\n- **TypingIndicator** - Typing animation indicator\n\n### Overlay Components (1 component)\n\nWrapper component for displaying loaders over content:\n\n- **LoaderOverlay** - Displays any loader over content with backdrop (full-screen or container-relative)\n\n### Button Components (1 component) ✨ *New in v2.2.0*\n\nSpecialized loaders for button loading states:\n\n- **ButtonSpinner** - Compact spinner optimized for buttons with multiple variants (circle, dots, bars) and positioning options\n\n### Status Components (2 components) ✨ *New in v2.2.0*\n\nAnimated indicators for success and error states:\n\n- **SuccessCheckmark** - Animated checkmark with optional circle background\n- **ErrorIndicator** - Animated X mark with optional shake effect and circle background\n\n### Transition Components (1 component) ✨ *New in v2.3.0*\n\nSmooth transitions between loading and loaded states:\n\n- **LoaderTransition** - Animated transitions between loading and content states with multiple animation types (fade, slide, scale)\n\n### Shimmer Components (3 components) ✨ *New in v3.0.0*\n\nShimmer effect placeholders with directional animations:\n\n- **ShimmerBox** - Shimmer container with customizable direction (left-to-right, right-to-left, top-to-bottom, bottom-to-top)\n- **ShimmerText** - Multi-line text shimmer placeholder\n- **ShimmerButton** - Button placeholder with shimmer effect\n\n### Orbit Components (3 components) ✨ *New in v3.0.0*\n\nOrbital and atomic animations:\n\n- **OrbitDots** - Dots orbiting around a central point\n- **OrbitRings** - Concentric rotating rings\n- **AtomLoader** - Electron-like orbital animation with nucleus\n\n### Bounce Components (2 components) ✨ *New in v3.0.0*\n\nPhysics-based bouncing loaders:\n\n- **BouncingDots** - Dots with physics-based bounce animation\n- **BouncingBalls** - 3D bouncing balls with shadow and squash effects\n\n### Infinity Components (2 components) ✨ *New in v3.0.0*\n\nContinuous loop animations:\n\n- **InfinityLoader** - Figure-8 infinity symbol animation with optional traveling dot\n- **MobiusLoader** - Segmented ribbon loop with twist effect\n\n### Text Components (1 component) ✨ *New in v3.0.0*\n\nAnimated loading text:\n\n- **LoadingText** - Animated loading text with multiple animation styles (dots, fade, bounce, wave)\n\n## Usage Examples\n\n### Skeleton Components\n\n```tsx\nimport {\n  Skeleton,\n  SkeletonText,\n  SkeletonAvatar,\n  SkeletonCard,\n} from 'premium-react-loaders';\n\n// Basic skeleton\n\u003cSkeleton width={200} height={20} /\u003e\n\n// Multi-line text\n\u003cSkeletonText lines={3} width=\"100%\" /\u003e\n\n// Avatar\n\u003cSkeletonAvatar size={48} shape=\"circle\" /\u003e\n\n// Card with avatar and text\n\u003cSkeletonCard hasAvatar lines={3} /\u003e\n\n// Custom colors\n\u003cSkeleton\n  width={200}\n  height={20}\n  baseColor=\"#e0e0e0\"\n  highlightColor=\"#f5f5f5\"\n/\u003e\n```\n\n### Spinner Components\n\n```tsx\nimport {\n  SpinnerCircle,\n  SpinnerRing,\n  SpinnerDots,\n} from 'premium-react-loaders';\n\n// Basic spinner\n\u003cSpinnerCircle size={40} color=\"#3b82f6\" /\u003e\n\n// Ring spinner\n\u003cSpinnerRing size={32} thickness={4} /\u003e\n\n// Dots spinner\n\u003cSpinnerDots size={40} dotCount={8} /\u003e\n\n// Speed control\n\u003cSpinnerCircle size={40} speed=\"fast\" /\u003e\n```\n\n### Progress Components\n\n```tsx\nimport {\n  ProgressBar,\n  ProgressCircle,\n  ProgressRing,\n} from 'premium-react-loaders';\n\n// Determinate progress\n\u003cProgressBar value={75} showValue /\u003e\n\n// Indeterminate progress\n\u003cProgressBar indeterminate /\u003e\n\n// Circular progress\n\u003cProgressCircle value={60} showValue size={80} /\u003e\n\n// Ring with gradient\n\u003cProgressRing\n  value={80}\n  gradient\n  color=\"#3b82f6\"\n  secondaryColor=\"#8b5cf6\"\n/\u003e\n```\n\n### Pulse Components\n\n```tsx\nimport { PulseDots, PulseWave, PulseBars } from 'premium-react-loaders';\n\n// Bouncing dots\n\u003cPulseDots dotCount={3} color=\"#3b82f6\" /\u003e\n\n// Wave pattern\n\u003cPulseWave barCount={5} /\u003e\n\n// Equalizer bars\n\u003cPulseBars barCount={4} speed=\"fast\" /\u003e\n```\n\n### New in v1.0.1\n\n```tsx\nimport { LoaderOverlay, SkeletonPage, SpinnerCircle } from 'premium-react-loaders';\n\n// Page skeleton for full page loading\n\u003cSkeletonPage variant=\"dashboard\" /\u003e\n\u003cSkeletonPage variant=\"article\" /\u003e\n\u003cSkeletonPage variant=\"profile\" /\u003e\n\n// Loader overlay over content\n\u003cLoaderOverlay\n  loading={isLoading}\n  loader={\u003cSpinnerCircle size={50} /\u003e}\n  blur\n\u003e\n  \u003cYourContent /\u003e\n\u003c/LoaderOverlay\u003e\n\n// Full-screen overlay with custom backdrop\n\u003cLoaderOverlay\n  loading={isLoading}\n  loader={\u003cSpinnerCircle /\u003e}\n  position=\"fixed\"\n  backdropOpacity={0.8}\n  backdropColor=\"#000000\"\n\u003e\n  \u003cYourApp /\u003e\n\u003c/LoaderOverlay\u003e\n```\n\n### New in v1.2.0\n\n**Size Presets** - Use semantic size names instead of pixel values:\n\n```tsx\nimport { SpinnerCircle, ProgressBar, PulseDots } from 'premium-react-loaders';\n\n// Size presets: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\u003cSpinnerCircle size=\"xs\" /\u003e  {/* 16px */}\n\u003cSpinnerCircle size=\"sm\" /\u003e  {/* 24px */}\n\u003cSpinnerCircle size=\"md\" /\u003e  {/* 40px - default */}\n\u003cSpinnerCircle size=\"lg\" /\u003e  {/* 56px */}\n\u003cSpinnerCircle size=\"xl\" /\u003e  {/* 72px */}\n\n// Still works with numbers and CSS strings\n\u003cSpinnerCircle size={50} /\u003e\n\u003cSpinnerCircle size=\"3rem\" /\u003e\n```\n\n**Reduced Motion Support** - Automatically respects user accessibility preferences:\n\n```tsx\n// Respects prefers-reduced-motion by default\n\u003cSpinnerCircle size=\"md\" /\u003e\n\n// Disable reduced motion support if needed\n\u003cSpinnerCircle size=\"md\" respectMotionPreference={false} /\u003e\n```\n\n**Animation Direction Control** - Reverse animations for creative effects:\n\n```tsx\nimport { SpinnerCircle, ProgressBar, PulseDots } from 'premium-react-loaders';\n\n// Reverse spinner rotation (counter-clockwise)\n\u003cSpinnerCircle size=\"lg\" reverse /\u003e\n\n// Reverse progress sweep direction\n\u003cProgressBar indeterminate reverse /\u003e\n\n// Reverse pulse/dot animation sequence\n\u003cPulseDots size=\"md\" reverse /\u003e\n```\n\n### New in v2.3.0\n\n**LoaderTransition** - Smooth transitions between loading and loaded states:\n\n```tsx\nimport { LoaderTransition, Skeleton } from 'premium-react-loaders';\n\n// Eliminate jarring content switches\n\u003cLoaderTransition\n  loading={isLoading}\n  loadingContent={\u003cSkeleton width={300} height={100} /\u003e}\n  transitionType=\"fade\"\n  duration={300}\n  delay={200}\n  minDuration={600}\n\u003e\n  \u003cYourActualContent /\u003e\n\u003c/LoaderTransition\u003e\n\n// Different transition types\n\u003cLoaderTransition loading={isLoading} loadingContent={\u003cSpinner /\u003e} transitionType=\"slide-up\"\u003e\n  \u003cContent /\u003e\n\u003c/LoaderTransition\u003e\n\n\u003cLoaderTransition loading={isLoading} loadingContent={\u003cSkeleton /\u003e} transitionType=\"scale\" timing=\"spring\"\u003e\n  \u003cContent /\u003e\n\u003c/LoaderTransition\u003e\n```\n\n**useEnhancedLoader** - Supercharged loading state management:\n\n```tsx\nimport { useEnhancedLoader } from 'premium-react-loaders';\n\nfunction MyComponent() {\n  const {\n    status,              // 'idle' | 'loading' | 'success' | 'error'\n    error,               // Error object if failed\n    retryAttempt,        // Current retry attempt number\n    history,             // Loading history with timestamps\n    startLoading,\n    stopLoading,\n    setError,\n    retry,\n    reset,\n  } = useEnhancedLoader({\n    delay: 200,\n    minDuration: 600,\n    retry: {\n      maxRetries: 3,\n      initialDelay: 1000,\n      backoffMultiplier: 2,\n    },\n    debounce: 300,       // Debounce loading starts\n    onSuccess: () =\u003e console.log('Success!'),\n    onError: (err) =\u003e console.error(err),\n  });\n\n  const fetchData = async () =\u003e {\n    startLoading();\n    try {\n      const data = await api.fetch();\n      stopLoading();\n    } catch (err) {\n      setError(err);\n    }\n  };\n\n  return (\n    \u003cdiv\u003e\n      {status === 'loading' \u0026\u0026 \u003cSpinnerCircle visible={isVisible} /\u003e}\n      {status === 'success' \u0026\u0026 \u003cSuccessCheckmark visible /\u003e}\n      {status === 'error' \u0026\u0026 (\n        \u003c\u003e\n          \u003cErrorIndicator visible /\u003e\n          \u003cbutton onClick={retry}\u003eRetry ({retryAttempt}/3)\u003c/button\u003e\n        \u003c/\u003e\n      )}\n    \u003c/div\u003e\n  );\n}\n```\n\n### New in v2.2.0\n\n**Button Loaders** - Specialized spinners for button states:\n\n```tsx\nimport { ButtonSpinner } from 'premium-react-loaders';\n\n// Inside a button\n\u003cbutton style={{ padding: '10px 20px', backgroundColor: '#3b82f6', color: 'white' }}\u003e\n  \u003cButtonSpinner variant=\"circle\" size={16} color=\"white\"\u003e\n    Submit Form\n  \u003c/ButtonSpinner\u003e\n\u003c/button\u003e\n\n// Different variants\n\u003cButtonSpinner variant=\"dots\" position=\"right\"\u003eNext\u003c/ButtonSpinner\u003e\n\u003cButtonSpinner variant=\"bars\" showContent={false}\u003eLoading\u003c/ButtonSpinner\u003e\n```\n\n**Status Indicators** - Show success and error states with smooth animations:\n\n```tsx\nimport { SuccessCheckmark, ErrorIndicator } from 'premium-react-loaders';\n\n// Success state\n\u003cSuccessCheckmark\n  visible={isSuccess}\n  showCircle\n  fillCircle\n  size={64}\n  color=\"#10b981\"\n/\u003e\n\n// Error state with shake\n\u003cErrorIndicator\n  visible={hasError}\n  showCircle\n  shake\n  size={64}\n  color=\"#ef4444\"\n/\u003e\n```\n\n### New in v2.1.0\n\n**Global Theming** - Customize all loaders from one place:\n\n```tsx\nimport { ThemeProvider } from 'premium-react-loaders';\n\nfunction App() {\n  return (\n    \u003cThemeProvider\n      theme={{\n        primaryColor: '#8b5cf6',\n        secondaryColor: '#ec4899',\n        skeletonBase: '#e2e8f0',\n        skeletonHighlight: '#f1f5f9',\n        defaultSize: 'lg',\n        defaultSpeed: 'fast',\n        defaultDelay: 200,\n        defaultMinDuration: 600,\n        respectMotionPreference: true,\n      }}\n    \u003e\n      {/* All loaders inherit these settings */}\n      \u003cSpinnerCircle /\u003e {/* Uses theme colors and size */}\n      \u003cSkeleton /\u003e {/* Uses theme skeleton colors */}\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\n**Smart Loading State Management** - Better UX with the `useLoader` hook:\n\n```tsx\nimport { useLoader } from 'premium-react-loaders';\nimport { SpinnerCircle } from 'premium-react-loaders';\n\nfunction MyComponent() {\n  const { loading, startLoading, stopLoading, isVisible } = useLoader({\n    delay: 200,        // Don't show loader for quick operations (\u003c200ms)\n    minDuration: 600,  // Show loader for at least 600ms to avoid flashing\n    autoHide: 5000,    // Auto-hide after 5 seconds (optional)\n  });\n\n  const fetchData = async () =\u003e {\n    startLoading();\n    try {\n      await api.fetchData();\n    } finally {\n      stopLoading();\n    }\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={fetchData}\u003eLoad Data\u003c/button\u003e\n      \u003cSpinnerCircle visible={isVisible} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n**Enhanced CSS Variables** - More control with comprehensive theming:\n\n```css\n:root {\n  /* Colors */\n  --loader-primary: #3b82f6;\n  --loader-secondary: #8b5cf6;\n  --skeleton-base: #e5e7eb;\n  --skeleton-highlight: #f5f5f5;\n\n  /* Sizes */\n  --loader-size-xs: 16px;\n  --loader-size-sm: 24px;\n  --loader-size-md: 40px;\n  --loader-size-lg: 56px;\n  --loader-size-xl: 72px;\n\n  /* Animation */\n  --loader-transition-fast: 150ms;\n  --loader-transition-normal: 300ms;\n  --loader-transition-slow: 500ms;\n}\n\n/* Dark mode support */\n@media (prefers-color-scheme: dark) {\n  :root {\n    --skeleton-base: #2d3748;\n    --skeleton-highlight: #4a5568;\n  }\n}\n```\n\n**Improved TypingIndicator** - Smoother animations with dynamic timing that scales with speed settings.\n\n## Customization\n\nAll components support multiple customization methods:\n\n### 1. className Prop\n\nPass custom CSS classes:\n\n```tsx\n\u003cSpinnerCircle size={40} className=\"my-spinner\" /\u003e\n```\n\n### 2. style Prop\n\nUse inline CSS styles:\n\n```tsx\n\u003cProgressBar value={75} style={{ opacity: 0.8, margin: '20px 0' }} /\u003e\n```\n\n### 3. Color Props\n\nDirect color control:\n\n```tsx\n\u003cSpinnerCircle color=\"#8b5cf6\" secondaryColor=\"#e0e0e0\" /\u003e\n```\n\n### 4. CSS Variables (Enhanced in v2.1.0)\n\nOverride theme variables globally for comprehensive customization:\n\n```css\n:root {\n  /* Primary colors */\n  --loader-primary: #3b82f6;\n  --loader-secondary: #8b5cf6;\n\n  /* Skeleton colors */\n  --skeleton-base: #e5e7eb;\n  --skeleton-highlight: #f5f5f5;\n\n  /* Size presets */\n  --loader-size-xs: 16px;\n  --loader-size-sm: 24px;\n  --loader-size-md: 40px;\n  --loader-size-lg: 56px;\n  --loader-size-xl: 72px;\n\n  /* Spacing and layout */\n  --loader-gap: 0.5rem;\n  --loader-radius-sm: 0.25rem;\n  --loader-radius-md: 0.5rem;\n  --loader-radius-lg: 1rem;\n  --loader-radius-full: 9999px;\n\n  /* Animation speeds */\n  --loader-transition-fast: 150ms;\n  --loader-transition-normal: 300ms;\n  --loader-transition-slow: 500ms;\n\n  /* Overlay */\n  --loader-overlay-backdrop: rgba(0, 0, 0, 0.5);\n}\n\n/* Dark mode support */\n@media (prefers-color-scheme: dark) {\n  :root {\n    --skeleton-base: #2d3748;\n    --skeleton-highlight: #4a5568;\n  }\n}\n```\n\n### 5. ThemeProvider (v2.1.0+)\n\nUse the `ThemeProvider` component for runtime theming:\n\n```tsx\nimport { ThemeProvider, useTheme } from 'premium-react-loaders';\n\nfunction App() {\n  return (\n    \u003cThemeProvider\n      theme={{\n        primaryColor: '#8b5cf6',\n        secondaryColor: '#ec4899',\n        defaultSize: 'lg',\n      }}\n    \u003e\n      \u003cYourComponents /\u003e\n    \u003c/ThemeProvider\u003e\n  );\n}\n\n// Access theme in child components\nfunction ChildComponent() {\n  const { theme } = useTheme();\n  return \u003cSpinnerCircle /\u003e; // Automatically uses theme settings\n}\n```\n\n## TypeScript\n\nFull TypeScript support with exported types:\n\n```typescript\nimport type {\n  SkeletonProps,\n  SpinnerCircleProps,\n  ProgressBarProps,\n  PulseDotsProps,\n  LoaderTheme,\n  UseLoaderOptions,\n  UseLoaderReturn,\n} from 'premium-react-loaders';\n\nconst MyComponent: React.FC = () =\u003e {\n  const skeletonProps: SkeletonProps = {\n    width: 200,\n    height: 20,\n    animate: true,\n  };\n\n  return \u003cSkeleton {...skeletonProps} /\u003e;\n};\n\n// Theme typing (v2.1.0+)\nconst customTheme: LoaderTheme = {\n  primaryColor: '#8b5cf6',\n  secondaryColor: '#ec4899',\n  defaultSize: 'lg',\n  defaultSpeed: 'fast',\n};\n\n// useLoader hook typing (v2.1.0+)\nconst loaderOptions: UseLoaderOptions = {\n  delay: 200,\n  minDuration: 600,\n  autoHide: 5000,\n};\n```\n\n## Common Props\n\nAll loader components share these common props:\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `size` | `number \\| string` | varies | Size of the loader |\n| `color` | `string` | `#3b82f6` | Primary color |\n| `className` | `string` | - | Custom CSS class |\n| `style` | `CSSProperties` | - | Inline styles |\n| `visible` | `boolean` | `true` | Show/hide loader |\n| `speed` | `'slow' \\| 'normal' \\| 'fast' \\| number` | `'normal'` | Animation speed |\n| `testId` | `string` | - | Test ID for testing |\n| `ariaLabel` | `string` | - | Accessibility label |\n\n## Component-Specific Props\n\n### Skeleton Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `width` | `number \\| string` | `100%` | Width of skeleton |\n| `height` | `number \\| string` | `1rem` | Height of skeleton |\n| `variant` | `'text' \\| 'circular' \\| 'rectangular' \\| 'rounded'` | `'text'` | Shape variant |\n| `animate` | `boolean` | `true` | Enable shimmer animation |\n| `baseColor` | `string` | `#e0e0e0` | Background color |\n| `highlightColor` | `string` | `#f5f5f5` | Shimmer color |\n\n### Progress Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `value` | `number` | `0` | Progress value (0-100) |\n| `indeterminate` | `boolean` | `false` | Indeterminate mode |\n| `showValue` | `boolean` | `false` | Show percentage text |\n| `thickness` | `number \\| string` | varies | Thickness of indicator |\n\n## Performance\n\nAll components are optimized for performance:\n\n- **CSS Animations** - No JavaScript animations, pure CSS\n- **Hardware Acceleration** - Uses `transform` and `opacity` for 60fps\n- **Tree-shakeable** - Only bundle components you import\n- **Minimal Bundle Size** - Lightweight with no dependencies\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## Storybook\n\nExplore all components interactively in Storybook:\n\n```bash\nnpm run storybook\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## License\n\nMIT © Ishan Karunaratne\n\n## Migrating from v1.x to v2.0\n\nv2.0.0 removes the Tailwind CSS dependency for a simpler, lighter library. Here's what changed:\n\n### Breaking Changes\n\n1. **No Tailwind Required** - The library now uses custom CSS instead of Tailwind\n2. **No Tailwind Configuration Needed** - Remove the library path from your `tailwind.config.js`\n3. **Slightly Different Styling** - Components use the same class names but with custom CSS utilities\n\n### Migration Steps\n\n1. **Update the package:**\n   ```bash\n   npm install premium-react-loaders@latest\n   ```\n\n2. **Remove Tailwind configuration** (if you're not using Tailwind for other parts of your app):\n   ```javascript\n   // Remove this from tailwind.config.js\n   './node_modules/premium-react-loaders/dist/**/*.{js,ts,jsx,tsx}'\n   ```\n\n3. **That's it!** Your components will continue to work with the same API. The styling is now self-contained.\n\n### What Stayed the Same\n\n- ✅ All component APIs are identical\n- ✅ All props work exactly the same\n- ✅ TypeScript types unchanged\n- ✅ Same import paths\n- ✅ Same customization options (className, style, color props)\n\n### Benefits of v2.0\n\n- 🎉 **70% smaller CSS bundle** (21KB → 6.27KB, 1.64KB gzipped)\n- 🎉 **36% smaller total package** (1.0MB → 640KB)\n- 🎉 **Zero configuration** - no Tailwind setup required\n- 🎉 **Works in any React project** - not just Tailwind projects\n- 🎉 **Faster installation** - fewer dependencies to download\n\n## Acknowledgments\n\nBuilt with:\n- [React](https://react.dev/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Vite](https://vite.dev/)\n- [Storybook](https://storybook.js.org/)\n\n---\n\n**Made with ❤️ by Ishan Karunaratne**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fishansasika%2Fpremium-react-loaders","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fishansasika%2Fpremium-react-loaders","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fishansasika%2Fpremium-react-loaders/lists"}