SkeletonLoader

skeletonloader-1779393693111.tsx

'use client'
function Skeleton({ width = '100%', height = '16px', radius = '6px' }) {
  return (
    <div style={{
      width, height, borderRadius: radius,
      background: 'linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%)',
      backgroundSize: '200% 100%',
      animation: 'shimmer 1.5s infinite',
    }}>
      <style>{'@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}'}</style>
    </div>
  )
}

export default function SkeletonLoader({ rows = 3 }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} style={{ display: 'flex', gap: '12px', alignItems: 'flex-start' }}>
          <Skeleton width="48px" height="48px" radius="50%" />
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '8px', paddingTop: '4px' }}>
            <Skeleton width="60%" height="14px" />
            <Skeleton width="90%" height="12px" />
            <Skeleton width="40%" height="12px" />
          </div>
        </div>
      ))}
    </div>
  )
}

Component info

CategoryLoaders

Frameworkreact

TierFREE

Copies0

About

Animated skeleton loading placeholder for cards and lists

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'
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',
      borderT

SpinnerLoader

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