@akshay-bhalala/loaders/test-app.jsx

A high-quality, customizable collection of React loader components for your UI: skeletons, spinners, bars, dots, rings, waves, and more. Perfect for modern web apps!

import React from 'react';
import {
  SkeletonLoader,
  SpinnerLoader,
  DotsLoader,
  BarLoader,
  PulseLoader,
  RingLoader,
  WaveLoader,
  DualRingLoader,
  BounceLoader,
  CircularProgressLoader,
} from '@akshay-bhalala/loaders';

const TestApp = () => (
  <div style={{ display: 'grid', gap: 32, padding: 32, background: '#fafbfc' }}>
    <div>
      <h4>SkeletonLoader</h4>
      <SkeletonLoader width={200} height={24} borderRadius={8} />
    </div>
    <div>
      <h4>SpinnerLoader</h4>
      <SpinnerLoader size={48} color="#1976d2" thickness={5} />
    </div>
    <div>
      <h4>DotsLoader</h4>
      <DotsLoader size={16} color="#1976d2" dotSpacing={10} />
    </div>
    <div>
      <h4>BarLoader</h4>
      <BarLoader width={300} height={8} color="#1976d2" backgroundColor="#e0e0e0" borderRadius={4} />
    </div>
    <div>
      <h4>PulseLoader</h4>
      <PulseLoader size={24} color="#1976d2" />
    </div>
    <div>
      <h4>RingLoader</h4>
      <RingLoader size={40} color="#1976d2" thickness={4} />
    </div>
    <div>
      <h4>WaveLoader</h4>
      <WaveLoader barCount={5} barWidth={4} barHeight={20} color="#1976d2" gap={4} />
    </div>
    <div>
      <h4>DualRingLoader</h4>
      <DualRingLoader size={40} color="#1976d2" thickness={4} />
    </div>
    <div>
      <h4>BounceLoader</h4>
      <BounceLoader ballCount={3} size={14} color="#1976d2" gap={8} />
    </div>
    <div>
      <h4>CircularProgressLoader</h4>
      <CircularProgressLoader size={40} color="#1976d2" thickness={4} />
    </div>
  </div>
);

export default TestApp;