Home
$@(\/)(\/)Y
Ripple Animation

82

Ripple Animation

This tailwind example is contributed by $@(\/)(\/)Y, on 30-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader,Author box, User information,Transitions

Avatar Spinner / Loading Profile Animation

$$@(\/)(\/)Y profile image$

Author $@(\/)(\/)Y

1.5k

5

Fork Fullscreen

<div class="w-full h-screen relative overflow-hidden py-20 bg-gray-200 dark:bg-black">
  <div class="absolute w-full inset-0 flex items-center justify-center">
    <div
      class="absolute animate-ripple rounded-full z-10 bg-cover bg-no-repeat bg-center bg-[url('https://images.unsplash.com/photo-1438761681033-6461ffad8d80?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxwZXJzb258ZW58MHwwfHx8MTc0MzMyNzEzNHww&ixlib=rb-4.0.3&q=80&w=1080')] outline outline-offset-2 outline-blue-300 dark:outline-gray-600 shadow-xl border [--i:0] w-[180px] h-[180px] opacity-1 [animation-delay:0s] border-solid border top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2 scale-100">
    </div>
    <div
      class="absolute animate-ripple rounded-full bg-blue-400 shadow-xl border [--i:1] w-[250px] h-[250px] opacity-[0.17] [animation-delay:0.06s] border-solid border top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2 scale-100">
    </div>
    <div
      class="absolute animate-ripple rounded-full bg-blue-400 shadow-xl border [--i:2] w-[320px] h-[320px] opacity-[0.14] [animation-delay:0.12s] border-solid border top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2 scale-100">
    </div>
    <div
      class="absolute animate-ripple rounded-full bg-blue-400 shadow-xl border [--i:3] w-[390px] h-[390px] opacity-[0.11000000000000001] [animation-delay:0.18s] border-solid border top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2 scale-100">
    </div>
    <div
      class="absolute animate-ripple rounded-full bg-blue-400 shadow-xl border [--i:4] w-[460px] h-[460px] opacity-[0.08000000000000002] [animation-delay:0.24s] border-solid border top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2 scale-100">
    </div>
    <div
      class="absolute animate-ripple rounded-full bg-blue-400 shadow-xl border [--i:5] width:530px;height:530px;opacity:0.05000000000000002;animation-delay:0.3s;border-style:solid;border-width:1px;border-color:hsl(var(--foreground), 0.3);top:50%;left:50%;transform:translate(-50%, -50%) scale(1)">
    </div>
    <div
      class="absolute animate-ripple rounded-full bg-blue-400 shadow-xl border [--i:6] w-[600px] h-[600px] opacity-[0.020000000000000018] [animation-delay:0.36s] border-solid border top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2 scale-100">
    </div>
    <div
      class="absolute animate-ripple rounded-full bg-blue-400 shadow-xl border [--i:7] w-[670px] h-[670px] opacity-[-0.009999999999999981] [animation-delay:0.42s] border-solid border top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2 scale-100">
    </div>
    <div
      class="absolute animate-ripple rounded-full bg-blue-400 shadow-xl border [--i:8] w-[740px] h-[740px] opacity-[-0.03999999999999998] [animation-delay:0.48s] border-solid border top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2 scale-100">
    </div>
    <div
      class="absolute animate-ripple rounded-full bg-blue-400 shadow-xl border [--i:9] w-[810px] h-[810px] opacity-[-0.07] [animation-delay:0.54s] border-dashed border top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2 scale-100">
    </div>
  </div>
</div>

Related Examples

Ripple Button
Ripple Button is an interactive button component with a ripple animation that responds to user clicks

Author:
sachin senal

7 months ago

1k
Stacked Profile
Stacked profile images

Author:
Mitch Chimwemwe Chanza

1 year ago

6.7k
Avatar
Avatar

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.6k
car delivary
car delivary

Author:
bonheur dev

3 months ago

315
Hero

Author:
ORGIN_DREAMS

4 months ago

596
Modern resume template
modern resume template with data

Author:
Amit Pachange

2 years ago

21.5k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

1 year ago

1.9k
User list
User list

Author:
Anonymous

3 months ago

240
3D Box

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

5.4k
Animated Title
App Logo or Main Title

Author:
khalidrootdevs

1 year ago

6.9k
Tailwind spinner
loading spinner component

Author:
Arya

2 years ago

38.9k
Spinner rings closed

Author:
Samuel Dawson

2 years ago

10.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1