Water Glass Loading Animation

Component

About

This React component renders a visually appealing water glass loading animation. It displays a glass filling with water, representing the loading progress, along with customizable loading text and percentage display. The component utilizes props for controlling progress, text, percentage visibility, and styling.

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

Code

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

Usage.tsx

import WaterGlassLoader from "@/components/ui/water-glass-loading-animation";
import { useState, useEffect } from "react"

export default function DemoOne() {
  const [progress, setProgress] = useState(0);
  const [isFilling, setIsFilling] = useState(true);
  const [loadingText, setLoadingText] = useState('Filling up...');

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress(prev => {
        if (isFilling) {
          if (prev >= 100) {
            setIsFilling(false);
            return 100;
          }
          return prev + 1;
        } else {
          if (prev <= 0) {
            setIsFilling(true);
            return 0;
          }
          return prev - 1;
        }
      });
    }, 50); // Animation speed

    return () => clearInterval(interval);
  }, [isFilling]);
  
  // Update loading text based on progress
  useEffect(() => {
     if (isFilling) {
        if (progress > 85) setLoadingText('Almost full...');
        else setLoadingText('Filling up...');
     } else {
        if (progress < 15) setLoadingText('Almost empty...');
        else setLoadingText('Emptying...');
     }
  }, [progress, isFilling]);

  return (
    <main className="flex min-h-screen w-full flex-col items-center justify-center bg-gradient-to-br from-cyan-100 to-cyan-300 font-sans">
      <WaterGlassLoader progress={progress} loadingText={loadingText} />
    </main>
  );
}