FreeLoaders

Loaders

Use this component for loading screens, data-fetching states, route transitions, and empty moments while content is being prepared.

ReactTailwind CSSMotionLoader

Overview

A minimal animated loading state with layered text shadow and bouncing dots.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<Loaders />

Loaders.tsx

tsx

"use client";

import { motion } from "framer-motion";

export function Loaders() {
  return (
    <div className="flex min-h-[260px] items-center justify-center rounded-xl border border-white/10 bg-black p-6">
      <div className="text-center">
        <motion.div
          animate={{ opacity: [0.45, 1, 0.45], scale: [0.98, 1.03, 0.98] }}
          transition={{ duration: 1.4, repeat: Infinity }}
          className="text-4xl font-black text-white [text-shadow:3px_3px_0_rgb(190,242,100),6px_6px_0_rgb(168,85,247)]"
        >
          Loading...
        </motion.div>
        <div className="mt-8 flex justify-center gap-2">
          {[0, 1, 2].map((item) => (
            <motion.span
              key={item}
              animate={{ y: [0, -10, 0] }}
              transition={{ duration: 0.8, repeat: Infinity, delay: item * 0.12 }}
              className="h-3 w-3 rounded-full bg-lime-300"
            />
          ))}
        </div>
      </div>
    </div>
  );
}