Home
Samuel Abera
Ripple Animation

Ripple Animation

This tailwind example is contributed by Samuel Abera, 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

Author Samuel Abera

80

1

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.1k
Loading dots
Black Loading dots

Author:
Anonymous

1 year ago

33.4k
Stacked Profile
Stacked profile images

Author:
Mitch Chimwemwe Chanza

1 year ago

6.2k
User Profile
User Profile

Author:
Samuel Abera

1 year ago

6.9k
User Profile
User Profile

Author:
Samuel Abera

1 year ago

4.6k
Flex Profile
Tailwind Flex User Profile

Author:
Samuel Abera

1 year ago

4k
Avatar
Avatar

Author:
Samuel Abera

1 year ago

4k
3D Box

Author:
Samuel Abera

11 months ago

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

Author:
Samuel Abera

9 months ago

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

Author:
ABDESLAMI ACHRAF

6 months ago

2.3k
Profit Card
Profit card with deatils

Author:
dongol heart

4 months ago

786
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

3 months ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ 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