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

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

899

3

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

Profile Card
Show more details on hover

Author:
Tamani Phiri

1 year ago

13.5k
Loading dots
Black Loading dots

Author:
Anonymous

1 year ago

35.9k
Stacked Profile
Stacked profile images

Author:
Mitch Chimwemwe Chanza

1 year ago

6.5k
User Profile
User Profile

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

1 year ago

4.9k
Flex Profile
Tailwind Flex User Profile

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

1 year ago

4.2k
Avatar
Avatar

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

1 year ago

4.2k
3D Box

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

1 year ago

4.8k
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

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

1 year ago

4.4k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

8 months ago

2.9k
Profit Card
Profit card with deatils

Author:
dongol heart

6 months ago

1.2k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

6 months ago

2.6k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

5 months ago

1.3k

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