WaveLoader

waveloader-1779388705768.tsx

'use client';
import { useEffect, useRef } from 'react';

export default function WaveLoader({ bars = 8, color = "#C9A84C", label = "Processing..." }) {
  const refs = useRef([]);

  useEffect(() => {
    const animations = refs.current.map((el, i) => {
      if (!el) return null;
      let frame;
      let t = (i / bars) * Math.PI * 2;
      const animate = () => {
        t += 0.08;
        const h = 8 + Math.sin(t) * 20;
        if (el) el.style.height = h + 'px';
        frame = requestAnimationFrame(animate);
      };
      frame = requestAnimationFrame(animate);
      return () => cancelAnimationFrame(frame);
    });
    return () => animations.forEach(c => c && c());
  }, [bars]);

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '16px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '4px', height: '60px' }}>
        {Array.from({ length: bars }, (_, i) => (
          <div
            key={i}
            ref={el => refs.current[i] = el}
            style={{
              width: '6px', height: '16px',
              borderRadius: '3px',
              background: color,
              opacity: 0.7 + (i / bars) * 0.3,
              boxShadow: `0 0 8px ${color}60`,
              transition: 'height 0.05s ease',
            }}
          />
        ))}
      </div>
      {label && <p style={{ color: 'rgba(245,245,240,0.5)', fontSize: '13px', margin: 0 }}>{label}</p>}
    </div>
  );
}

Component info

CategoryLoaders

Frameworkreact

TierFREE

Copies0

About

Animated wave bar loader with customizable speed

More from Loaders

'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((

LoaderCollection

Loaders