TriangleLoader

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds TriangleLoader to your project and fits it to your theme.

"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;