Components
This Triangle Polygon Loader is a visually striking, animated loading component built with React and Tailwind CSS, designed to enhance the user experience during waiting periods. It features multiple triangle polygons that radiate from a central point, scaling and rotating outward while gradually fading, creating a dynamic and futuristic effect. Fully configurable, it allows developers to adjust the number of polygons, stroke color, stroke width, animation speed, and overall size to suit different design contexts. The loader is responsive, theme-aware, and works seamlessly with dark and light modes, making it a modern, versatile, and attention-grabbing addition to any web interface or application.
Loading preview...
"use client";
import React from "react";
import TriangleLoader from "@/components/ui/triangle-loader";
const TriangleLoaderDemo: React.FC = () => {
return (
<div className="flex items-center justify-center">
<TriangleLoader
size={1000}
color="#facc15" // Tailwind yellow-400 hex
strokeWidth={12}
polygons={15}
speed={12}
className="text-blue-400"
/>
</div>
);
};
export default TriangleLoaderDemo;