Components
An animated text shimmer loader that cycles through labels and icons with a moving highlight, percentage progress, and an optional token counter for loading states.
Loading preview...
"use client";
import { ShimmerLoader } from "@/components/ui/shimmer-loader";
import { useState } from "react";
export default function ShimmerLoaderDemo() {
const [key, setKey] = useState(0);
return (
<div className="flex min-h-[320px] w-full items-center justify-center bg-black p-10">
<div className="flex flex-col gap-3">
<ShimmerLoader
key={`a-${key}`}
labels={["Analysing.", "Analysing..", "Analysing..."]}
icons={["✦", "◆", "✶", "❋", "✸"]}
duration={3000}
tokenTarget={0.16}
showPercent={true}
fontSize={14}
paddingY={4}
cellPadding={2}
textClassName="text-purple-200/90"
onComplete={() => setKey((prev) => prev + 1)}
/>
<ShimmerLoader
key={`b-${key}`}
labels={["Booting.", "Booting..", "Booting..."]}
icons={["✦", "◆", "✶", "❋", "✸"]}
duration={3400}
tokenTarget={0.24}
showPercent={true}
fontSize={14}
paddingY={4}
cellPadding={2}
textClassName="text-purple-200/90"
onComplete={() => {}}
/>
<ShimmerLoader
key={`c-${key}`}
labels={["Syncing.", "Syncing..", "Syncing..."]}
icons={["◍", "◉", "◎", "●", "◌"]}
duration={3800}
tokenTarget={0.22}
showPercent={true}
fontSize={14}
paddingY={4}
cellPadding={2}
textClassName="text-purple-200/90"
onComplete={() => {}}
/>
</div>
</div>
);
}