ShimmerCard

shimmercard-1779394345653.tsx

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

function Shimmer({ w = '100%', h = '16px', r = '6px' }) {
  return (
    <div style={{
      width:w, height:h, borderRadius:r,
      background:'linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%)',
      backgroundSize:'200% 100%',
      animation:'shimmer 1.5s infinite',
    }}/>
  )
}

export default function ShimmerCard({ loaded = false }) {
  const [isLoaded, setIsLoaded] = useState(loaded)
  return (
    <div style={{ maxWidth:'320px' }}>
      <style>{'@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}'}</style>
      {!isLoaded ? (
        <div style={{ background:'#fff', borderRadius:'16px', padding:'20px', boxShadow:'0 2px 16px rgba(0,0,0,0.06)' }}>
          <Shimmer w="56px" h="56px" r="50%"/>
          <div style={{ height:'12px' }}/>
          <Shimmer w="65%" h="18px"/>
          <div style={{ height:'8px' }}/>
          <Shimmer w="40%" h="12px"/>
          <div style={{ height:'16px' }}/>
          <Shimmer h="12px"/>
          <div style={{ height:'8px' }}/>
          <Shimmer w="85%" h="12px"/>
          <div style={{ height:'8px' }}/>
          <Shimmer w="70%" h="12px"/>
          <div style={{ height:'16px' }}/>
          <Shimmer w="100px" h="36px" r="10px"/>
        </div>
      ) : (
        <div style={{ background:'#fff', borderRadius:'16px', padding:'20px', boxShadow:'0 2px 16px rgba(0,0,0,0.06)' }}>
          <div style={{ width:'56px', height:'56px', borderRadius:'50%', background:'linear-gradient(135deg,#6d28d9,#2563eb)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:'24px', marginBottom:'12px' }}>👤</div>
          <div style={{ fontWeight:700, fontSize:'17px', color:'#1e293b', marginBottom:'4px' }}>Alex Johnson</div>
          <div style={{ fontSize:'13px', color:'#94a3b8', marginBottom:'12px' }}>Senior Developer</div>
          <div style={{ fontSize:'14px', color:'#64748b', lineHeight:1.6, marginBottom:'16px' }}>Building amazing components with Empire UI. Passionate about clean code and great UX.</div>
          <button style={{ background:'#6d28d9', color:'#fff', border:'none', borderRadius:'10px', padding:'8px 20px', cursor:'pointer', fontWeight:600 }}>View Profile</button>
        </div>
      )}
      <button onClick={()=>setIsLoaded(!isLoaded)} style={{ marginTop:'12px', width:'100%', padding:'8px', background:'#f8fafc', border:'1px solid #e2e8f0', borderRadius:'8px', cursor:'pointer', fontSize:'13px', color:'#374151', fontWeight:500 }}>
        Toggle {isLoaded?'Loading':'Loaded'} State
      </button>
    </div>
  )
}

Component info

CategoryAnimations

Frameworkreact

TierFREE

Copies0

About

Shimmer loading card with gradient sweep animation

More from Animations

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

const STRINGS = ['Build faster.', 'Ship better.', 'Design smarter.', 'Scale effortlessly.']

export default function TypingAnimation({ strings = STRINGS, speed = 80, pause = 1500 }) {
  const

TypingAnimation

Animations

'use client'
export default function PulseIndicator({
  label = 'Live',
  color = '#10b981',
  size = 12,
  rings = 2,
}) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:'10px' }}>
      <div style={{ position:'relative', widt

PulseIndicator

Animations

'use client'
export default function GradientText({
  text = 'Empire UI',
  size = '48px',
  gradient = 'linear-gradient(90deg, #6d28d9, #2563eb, #0891b2, #10b981, #6d28d9)',
}) {
  return (
    <div>
      <style>{'@keyframes flow{0%{background-posi

GradientText

Animations

'use client'
const ITEMS = ['⚛️ React','🔷 TypeScript','💨 Tailwind','▲ Next.js','🔶 Prisma','🐘 PostgreSQL','🤖 OpenAI','🚀 Vercel','🐳 Docker','⚡ Vite']

export default function Marquee({ items = ITEMS, speed = 30, pauseOnHover = true }) {
  return

Marquee

Animations