Ripple Animation

This tailwind example is contributed by $@(\/)(\/)¥, on 30-Mar-2025. Component is made with Tailwind v3.4. 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

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

Author $@(\/)(\/)¥

Tailwind v3.4 2.3k 9

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

Tamani Phiri

3 years ago

15.2k
Loading dots
Black Loading dots

Anonymous

3 years ago

40.6k
Stacked Profile
Stacked profile images

Mitch Chimwemwe Chanza

2 years ago

8.1k
User Profile
User Profile

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.4k
Flex Profile
Tailwind Flex User Profile

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

4.8k
Avatar
Avatar

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

5.2k
3D Box

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

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

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

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

ABDESLAMI ACHRAF

2 years ago

4.6k
Profit Card
Profit card with deatils

dongol heart

1 year ago

3k
canvas fully covers
canvas fully covers

ABDESLAMI ACHRAF

1 year ago

5.2k
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.

Abhiraj

1 year ago

2.5k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.