SpinnerLoader

spinnerloader-1779393693122.tsx

'use client'
export default function SpinnerLoader({ type = 'ring', size = 48, color = '#6d28d9' }) {
  const s = size
  const style = {
    ring: {
      width: s, height: s, borderRadius: '50%',
      border: s/8 + 'px solid #e2e8f0',
      borderTopColor: color,
      animation: 'spin 0.8s linear infinite',
    },
    dots: {
      display: 'flex', gap: s/6,
      alignItems: 'center',
    },
    pulse: {
      width: s, height: s, borderRadius: '50%',
      background: color, opacity: 0.7,
      animation: 'pulse 1s ease infinite',
    },
  }
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '24px', padding: '20px' }}>
      <style>{'@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,100%{transform:scale(1);opacity:0.7}50%{transform:scale(1.3);opacity:1}}@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}'}</style>
      <div style={style.ring} />
      <div style={style.dots}>
        {[0,0.15,0.3].map((delay, i) => (
          <div key={i} style={{
            width: s/4, height: s/4, borderRadius: '50%', background: color,
            animation: 'bounce 0.8s ease infinite',
            animationDelay: delay + 's',
          }} />
        ))}
      </div>
      <div style={style.pulse} />
    </div>
  )
}

Component info

CategoryLoaders

Frameworkreact

TierFREE

Copies0

About

Collection of CSS spinner animations in different styles

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

'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) =

WaveLoader

Loaders

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

function makeItems(start, count) {
  return Array.from({ length: count }, (_, i) => ({
    id: start + i,
    title: 'Item ' + (start + i),
    desc: 'Description for item

InfiniteScroll

Loaders

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

export default function ProgressBar({
  value = 75, animated = true, label = 'Upload Progress',
  color = 'linear-gradient(90deg, #6d28d9, #2563eb)',
}) {
  const [width, setWidth] = useState(

ProgressBar

Loaders