PulseIndicator

pulseindicator-1779394643229.tsx

'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', width:size*3, height:size*3, display:'flex', alignItems:'center', justifyContent:'center' }}>
        {Array.from({length:rings}).map((_,i) => (
          <div key={i} style={{
            position:'absolute', borderRadius:'50%',
            background:color, opacity:0.2,
            animation:'pulse 2s ease-out ' + (i * 0.6) + 's infinite',
            width:size*3, height:size*3,
          }}/>
        ))}
        <div style={{ width:size, height:size, borderRadius:'50%', background:color, position:'relative', zIndex:1 }}/>
        <style>{'@keyframes pulse{0%{transform:scale(0.3);opacity:0.4}100%{transform:scale(1);opacity:0}}'}</style>
      </div>
      <span style={{ fontSize:'13px', fontWeight:700, color }}>{label}</span>
    </div>
  )
}

Component info

CategoryAnimations

Frameworkreact

TierFREE

Copies0

About

Animated pulse ring indicators for live status and alerts

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'
import { useState } from 'react'

export default function ParticleButton({ label = 'Click Me! 🎉' }) {
  const [particles, setParticles] = useState([])
  const burst = (e) => {
    const rect = e.currentTarget.getBoundingClientRect()

ParticleButton

Animations

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

export default function MagneticButton({ label = 'Hover me ✨', strength = 30 }) {
  const [pos, setPos] = useState({ x:0, y:0 })
  const ref = useRef(null)
  const onMove = (e) => {
    const rec

MagneticButton

Animations

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

ShimmerCard

Animations