loader-dots.mdx

title	Loader Dots
description	Loader Dots variations

import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; import { Dots_v1, Dots_v2, Dots_v3, Dots_v4 } from '@/components/loaders/dots'; import { WithContributor } from '@/components/with-contributor';

Variant 1

<Tabs items={["Preview", "React"]}> <WithContributor contributorKey={"aliHussein"} className="flex-row-center">

<Dots_v1 />

"use client"
import {motion} from 'framer-motion';
//======================================
export const Dots_v1 = () => (
    <div className="relative flex items-center">
      <motion.span
        initial={{ scale: 0 }}
        animate={{ scale: 1 }}
        transition={{ duration: 0.7, repeat: Infinity }}
        className="absolute size-3.5 rounded-full bg-current left-2"
      ></motion.span>
      <motion.span
        initial={{ x: 0 }}
        animate={{ x: 24 }}
        transition={{ duration: 0.7, repeat: Infinity }}
        className="absolute size-3.5 rounded-full bg-current left-2"
      ></motion.span>
      <motion.span
        initial={{ x: 0 }}
        animate={{ x: 24 }}
        transition={{ duration: 0.7, repeat: Infinity }}
        className="absolute size-3.5 rounded-full bg-current left-8"
      ></motion.span>
      <motion.span
        initial={{ scale: 1 }}
        animate={{ scale: 0 }}
        transition={{ duration: 0.7, repeat: Infinity }}
        className="absolute size-3.5 rounded-full bg-current left-14"
      ></motion.span>
    </div>
);

Variant 2

<Tabs items={["Preview", "React"]}> <WithContributor contributorKey={"aliHussein"} className="flex-row-center"> <Dots_v2 />

"use client"
import {motion} from 'framer-motion';
//======================================
export const Dots_v2 = () => (
    (
    <div className="flex items-center justify-center">
      <div className="flex space-x-2">
        <motion.div
          className="size-3.5 rounded-full bg-current"
          animate={{
            scale: [1, 1.3, 1],
            opacity: [0.6, 1, 0.6],
          }}
          transition={{
            duration: 1.1,
            ease: 'easeInOut',
            repeat: Infinity,
          }}
        />
        <motion.div
          className="size-3.5 rounded-full bg-current"
          animate={{
            scale: [1, 1.3, 1],
            opacity: [0.6, 1, 0.6],
          }}
          transition={{
            duration: 1.1,
            ease: 'easeInOut',
            repeat: Infinity,
            delay: 0.3,
          }}
        />
        <motion.div
          className="size-3.5 rounded-full bg-current"
          animate={{
            scale: [1, 1.3, 1],
            opacity: [0.6, 1, 0.6],
          }}
          transition={{
            duration: 1.1,
            ease: 'easeInOut',
            repeat: Infinity,
            delay: 0.6,
          }}
        />
      </div>
    </div>
  )
);

Variant 3

<Tabs items={["Preview", "React"]}> <WithContributor contributorKey={"aliHussein"} className="flex-row-center"> <Dots_v3 />

"use client"
import {motion} from 'framer-motion';
//======================================
export const Dots_v3 = () => (
    <div className="flex items-center justify-center space-x-2">
      <div className="size-3.5 animate-bounce rounded-full bg-current [animation-delay:-0.3s]"></div>
      <div className="size-3.5 animate-bounce rounded-full bg-current [animation-delay:-0.13s]"></div>
      <div className="size-3.5 animate-bounce rounded-full bg-current"></div>
    </div>
  );

Variant 4

<Tabs items={["Preview", "React"]}> <WithContributor contributorKey={"aliHussein"} className="flex-row-center"> <Dots_v4 />

"use client"
import {motion} from 'framer-motion';
//======================================
export const Dots_v4 = () => (
  <div className="flex items-center justify-center space-x-2">
    {[...Array(3)].map((_, index) => (
      <motion.span
        key={index}
        className="size-3.5 rounded-full bg-current"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{
          delay: index * 0.2,
          duration: 1.2,
          repeat: Infinity,
          repeatType: 'reverse',
        }}
      ></motion.span>
    ))}
  </div>
);