About
A smooth staggered circular ripple page loader for entry transitions. Explore more free GSAP components at goodmotion.vercel.app
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Circle Reveal Loader to your project and fits it to your theme.
Code
How Circle Reveal Loader is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import React from "react";
import RippleRevealWave from "@/components/ui/circle-reveal-loader";
export function CircleRevealLoaderDemo() {
return (
<div
style={{
position: "relative",
width: "100%",
height: "100vh",
backgroundColor: "#FFFFFF",
display: "flex",
alignItems: "center",
justifyContent: "center",
overflow: "hidden",
}}
>
{/* Loader chỉ chạy 1 lần duy nhất khi người dùng vào trang */}
<RippleRevealWave
color1="#CEF533"
color2="#F55925"
color3="#000000"
duration={0.85}
staggerOverlap={0.58}
ease="power3.inOut"
/>
{/* Nội dung chính giữa màn hình */}
<h1
style={{
margin: 0,
fontFamily:
"Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
fontSize: "40px",
fontWeight: 700,
lineHeight: 1,
letterSpacing: "-0.06em",
color: "#000000",
textAlign: "center",
whiteSpace: "nowrap",
}}
>
loading screen
</h1>
</div>
);
}
export default CircleRevealLoaderDemo;Dependencies
More by GoodMotion
View all
Googly Eye Cursor
11
Y2K Dreamy Text
1