Wensity

Liquid Loading Animation

Pro

A loader that fills with liquid to your progress, in a glass circle, square, or word.

loaderloadingliquidwaterprogresswavesvgspinner
Liquid Loading Animation component preview

Overview

Liquid Loading Animation is a React and Tailwind CSS liquid loader that fills a glass circle, rounded square, or any word with water, in Next.js or any React app. Pass value from 0 to 100 and the level rises on a critically damped spring without overshoot, while the waves swell as it moves and calm once it stops. Omit value for an indeterminate loop. The percentage turns white where liquid covers it. It is one SVG with progressbar ARIA, paused off screen and still under reduced motion. The text shape uses the inherited font family, so pick a bold one.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add liquid-loading-animation

Usage

Import LiquidLoadingAnimation from @/components/wensity/liquid-loading-animation and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { LiquidLoadingAnimation } from "@/components/wensity/liquid-loading-animation";


export default function Example({ progress }: { progress: number }) {
  return (
    <div className="flex flex-col items-center gap-8">
      <LiquidLoadingAnimation value={progress} label="Uploading file" />
      <LiquidLoadingAnimation shape="text" text="Loading" />
    </div>
  );
}

Props

PropTypeDefaultDescription
valuenumber-Progress from 0 to 100. Omit it for an indeterminate loader that drifts up and down.
shape"circle" | "square" | "text" | "path""circle"Container the liquid fills: a glass circle, a glass rounded square, the letters of a word, or an SVG path.
textstring"Loading"The word whose letters fill up when shape is text.
pathstring-SVG path data to fill when shape is path. The box is measured from the path itself.
colorstring"#2f7bff"Liquid color, any CSS color.
labelColorstring"#ffffff"Color of the percentage where the liquid covers it.
wavenumber0.5Wave height, from 0 for a flat surface to 1.
speednumber1Playback rate of the waves, bubbles, and indeterminate loop.
bubblesbooleantrueBubbles rising through the liquid.
showValueboolean-Shows the percentage. On by default for circle and square.
formatValue(percent: number) => string-Formats the label. Receives a whole number from 0 to 100.
labelstring"Loading"Accessible name of the loader.