Loading Animation

Component 70

About

Custom page loading animation component

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

Code

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

Usage.tsx

import React, { useState } from 'react';
import RadialPulseLoader from "@/components/ui/loading-animation";

export default function DemoOne() {
  const [loading, setLoading] = useState({
    radial: false,
    orbital: false,
    pendulum: false,
    pulse: false,
    concentric: false,
    sequential: false
  });

  const simulateLoading = (loaderType) => {
    setLoading(prev => ({ ...prev, [loaderType]: true }));
    setTimeout(() => {
      setLoading(prev => ({ ...prev, [loaderType]: false }));
    }, 3000);
  };
  return (
    <div className="loader-card">
      <div className="loader-container">
        <RadialPulseLoader text="Loading content..." />
      </div>
    </div>
  );
}