DocsComponents
Star us
Docs

Bar Loader

A bar loader is a visual indicator that represents loading progress using a horizontal bar animation.

Installation

Install dependencies

npm install framer-motion lucide-react

Run the following command

It will create a new file bar-loader.tsx inside the components/mage-ui/preloader directory.

mkdir -p components/mage-ui/preloader && touch components/mage-ui/preloader/bar-loader.tsx

Paste the code

Open the newly created file and paste the following code:

"use client";
import { Variants, motion } from "framer-motion";
 
const Bar = () => {
  return (
    <div className="grid place-content-center bg-amber-700 h-screen w-[90vw]">
      <BarLoader />
    </div>
  );
};
 
const variants = {
  initial: {
    scaleY: 0.5,
    opacity: 0,
  },
  animate: {
    scaleY: 1,
    opacity: 1,
    transition: {
      repeat: Infinity,
      repeatType: "mirror",
      duration: 1,
      ease: "circIn",
    },
  },
} as Variants;
 
const BarLoader = () => {
  return (
    <motion.div
      transition={{
        staggerChildren: 0.25,
      }}
      initial="initial"
      animate="animate"
      className="flex gap-1"
    >
      <motion.div variants={variants} className="h-12 w-2 bg-white" />
      <motion.div variants={variants} className="h-12 w-2 bg-white" />
      <motion.div variants={variants} className="h-12 w-2 bg-white" />
      <motion.div variants={variants} className="h-12 w-2 bg-white" />
      <motion.div variants={variants} className="h-12 w-2 bg-white" />
    </motion.div>
  );
};
 
export default Bar;
ModalCircular Progress