✨ added ripple wave loader

Author: Ansub

src/app/(docs)/components/loaders/ripple-wave/page.mdx

@@ -0,0 +1,7 @@
+export const metadata = {
+    title: 'Ripple Wave Loader',
+    description: 'A Ripple Wave Loader animation that moves in a wave pattern.',
+}
+
+<BackButton href="/components/loaders" />
+<ComponentPreview path="components/loaders/RippleWaveLoader" usingFramer />

src/showcase/components/loaders/RippleWaveLoader.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import React from 'react'
+import { motion } from 'framer-motion'
+
+const RippleWaveLoader = () => {
+  return (
+    <div className="flex items-center justify-center space-x-1">
+      {[...Array(7)].map((_, index) => (
+        <motion.div
+          key={index}
+          className="h-8 w-2 rounded-full bg-red-500"
+          animate={{
+            scaleY: [0.5, 1.5, 0.5],
+            scaleX: [1, 0.8, 1],
+            translateY: ['0%', '-15%', '0%'],
+          }}
+          transition={{
+            duration: 1,
+            repeat: Infinity,
+            ease: 'easeInOut',
+            delay: index * 0.1,
+          }}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default RippleWaveLoader

src/showcase/ui-group/LoaderCards.tsx

@@ -13,6 +13,7 @@ import PulsatingGradientLoader from '@/showcase/components/loaders/PulsatingGrad
 import Card from './Card'
 import WaveLoader from '../components/loaders/WaveLoader'
 import SpiralLoader from '../components/loaders/SpiralLoader'
+import RippleWaveLoader from '../components/loaders/RippleWaveLoader'
 
 interface LoaderCardProps {
   title: string
@@ -84,6 +85,11 @@ const data: LoaderCardProps[] = [
     link: '/components/loaders/spiral',
     component: <SpiralLoader />,
   },
+  {
+    title: 'Ripple Wave',
+    link: '/components/loaders/ripple-wave',
+    component: <RippleWaveLoader />,
+  },
 ]
 
 export default function LoaderCards() {