LoaderCollection

'use client'
import { useState, useEffect } from 'react'

export default function LoaderCollection() {
  const [progress, setProgress] = useState(0)
  const [matrix, setMatrix] = useState<string[]>([])

  useEffect(() => {
    const t = setInterval(() => setProgress(p => p >= 100 ? 0 : p + 2), 60)
    return () => clearInterval(t)
  }, [])

  useEffect(() => {
    const chars = '01アイウエオカキクケコ'
    const t = setInterval(() => setMatrix(Array.from({ length: 20 }, () => chars[Math.floor(Math.random() * chars.length)])), 100)
    return () => clearInterval(t)
  }, [])

  return (
    <div style={{ padding: 40, background: '#0A0A0A', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>

      {/* Spinner */}
      <div style={card}>
        <div style={{ width: 40, height: 40, border: '3px solid rgba(255,255,255,0.1)', borderTopColor: '#C9A84C', borderRadius: '50%', animation: 'spin 0.8s linear infinite' }} />
        <span style={label}>Spinner</span>
      </div>

      {/* Dots */}
      <div style={card}>
        <div style={{ display: 'flex', gap: 6 }}>
          {[0, 1, 2].map(i => (
            <div key={i} style={{ width: 10, height: 10, borderRadius: '50%', background: '#C9A84C', animation: `bounce 1.2s ${i * 0.2}s ease-in-out infinite` }} />
          ))}
        </div>
        <span style={label}>Bouncing Dots</span>
      </div>

      {/* Progress Bar */}
      <div style={card}>
        <div style={{ width: 120, height: 4, background: 'rgba(255,255,255,0.08)', borderRadius: 2, overflow: 'hidden' }}>
          <div style={{ height: '100%', width: `${progress}%`, background: 'linear-gradient(90deg, #C9A84C, #6366f1)', borderRadius: 2, transition: 'width 0.06s linear' }} />
        </div>
        <span style={label}>{progress}%</span>
      </div>

      {/* Orbit */}
      <div style={card}>
        <div style={{ position: 'relative', width: 44, height: 44 }}>
          <div style={{ position: 'absolute', inset: 0, border: '2px solid rgba(201,168,76,0.15)', borderRadius: '50%' }} />
          <div style={{ position: 'absolute', inset: 4, border: '2px solid rgba(99,102,241,0.2)', borderRadius: '50%', animation: 'spin 2s linear infinite reverse' }} />
          <div style={{ position: 'absolute', top: -3, left: '50%', marginLeft: -3, width: 6, height: 6, background: '#C9A84C', borderRadius: '50%', animation: 'spin 1.2s linear infinite', transformOrigin: '3px 25px' }} />
        </div>
        <span style={label}>Orbit</span>
      </div>

      {/* Skeleton */}
      <div style={card}>
        <div style={{ width: 120, display: 'flex', flexDirection: 'column', gap: 6 }}>
          {[100, 80, 60].map(w => (
            <div key={w} style={{ height: 8, width: w, borderRadius: 4, background: 'linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 75%)', backgroundSize: '200% 100%', animation: 'shimmer 1.5s infinite' }} />
          ))}
        </div>
        <span style={label}>Skeleton</span>
      </div>

      {/* Matrix */}
      <div style={card}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 4, fontFamily: 'monospace' }}>
          {matrix.slice(0, 20).map((c, i) => (
            <span key={i} style={{ color: Math.random() > 0.7 ? '#C9A84C' : '#22c55e', fontSize: 11, opacity: Math.random() * 0.8 + 0.2 }}>{c}</span>
          ))}
        </div>
        <span style={label}>Matrix</span>
      </div>

      <style>{`
        @keyframes spin { to { transform: rotate(360deg) } }
        @keyframes bounce { 0%,80%,100% { transform:translateY(0) } 40% { transform:translateY(-8px) } }
        @keyframes shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }
      `}</style>
    </div>
  )
}
const card: React.CSSProperties = { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 14, background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 12, padding: 24, minHeight: 100 }
const label: React.CSSProperties = { color: 'rgba(255,255,255,0.3)', fontSize: 11 }

Component info

About

Collection of 6 premium loading indicators: spinner, dots, skeleton, progress, orbit, and matrix