Shader Loader

Shaders 73

About

An animated loading spinner rendered with a custom WebGL fragment shader, with 3 shapes (sphere, swirl, ripple) and 3 visual styles (plain, blur, dither).

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

Code

How Shader Loader is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { Loader } from "@/components/ui/loader";

export default function LoaderDemo() {
  const speed = 1;

  return (
    <div className="flex items-center justify-center gap-6 overflow-x-auto p-8">
      <Loader shape="sphere" variant="blur" color="#0ea5e9" speed={speed} />
      <Loader
        className="dark:hidden"
        shape="swirl"
        variant="plain"
        size="sm"
        color="#0a0a0a"
        speed={speed}
      />
      <Loader
        className="hidden dark:block"
        shape="swirl"
        variant="plain"
        size="sm"
        color="#ffffff"
        speed={speed}
      />
      <Loader shape="sphere" variant="dither" color="#ea580c" speed={speed} />
      <Loader shape="ripple" variant="blur" color="#e879f9" speed={speed} />
      <Loader
        shape="swirl"
        variant="dither"
        size="sm"
        color="#e11d48"
        speed={speed}
      />
    </div>
  );
}