Water Animation CSS-loader using HTML and CSS

The concept of water loading is been around for quite some time now. The idea is to first drink a huge amount of water, some athletes drink even more than 10 liters a day, followed by a water restriction.

Water Animation CSS Properties

Following are the CSS properties used:

Background-size: The background-size CSS property sets the size of the element’s background image. The image can be left to its natural size, stretched, or constrained to fit the available space.

Height: The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.

Background-repeat: The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.

Width: The width CSS property sets an element’s width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area.

Background: The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

Background-position: The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin.

Water Animation Code Block

Here is the code for implementing the Water Animation CSS-loader.

.water-loader {
        --r1: 154%;
        --r2: 68.5%;
        width: 200px;
        height: 100px;
        
        background: radial-gradient(
              var(--r1) var(--r2) at top,
              #0000 79.5%,
              #269af2 80%
            )
            center left,
          radial-gradient(
              var(--r1) var(--r2) at bottom,
              #269af2 79.5%,
              #0000 80%
            )
            center center,
          radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%)
            center right,
          #ccc;
        background-size: 50.5% 220%;
        background-position: -100% 0%, 0% 0%, 100% 0%;
        background-repeat: no-repeat;
      }

Yay! We have created the static Water Animation CSS-loader.

Here is the output:

Water Animation CSS Animation

water-fill animation can be implemented by scaling up and down the shape linearly.

Following are the classes used for animation.

The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Here is the CSS animation class implementing CSS.

@keyframes  water-fill {
        33% {
          background-position: 0% 33%, 100% 33%, 200% 33%;
        }
        66% {
          background-position: -100% 66%, 0% 66%, 100% 66%;
        }
        100% {
          background-position: 0% 100%, 100% 100%, 200% 100%;
        }
      }

The following way is to declare the CSS Class inside the class block.

 .water-loader {
        --r1: 154%;
        --r2: 68.5%;
        width: 200px;
        height: 100px;
        animation: water-fill 2s infinite linear;
        background: radial-gradient(
              var(--r1) var(--r2) at top,
              #0000 79.5%,
              #269af2 80%
            )
            center left,
          radial-gradient(
              var(--r1) var(--r2) at bottom,
              #269af2 79.5%,
              #0000 80%
            )
            center center,
          radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%)
            center right,
          #ccc;
        background-size: 50.5% 220%;
        background-position: -100% 0%, 0% 0%, 100% 0%;
        background-repeat: no-repeat;
      }
      @keyframes water-fill {
        33% {
          background-position: 0% 33%, 100% 33%, 200% 33%;
        }
        66% {
          background-position: -100% 66%, 0% 66%, 100% 66%;
        }
        100% {
          background-position: 0% 100%, 100% 100%, 200% 100%;
        }
      }

Following is the output for Water Animation CSS-loader animation.

Water Animation Video Tutorial

You can find the complete coding tutorial in the following YouTube Short video.

Complete Code using HTML and CSS

Copy and paste the complete code in Visual studio code to view the output.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .water-loader {
        --r1: 154%;
        --r2: 68.5%;
        width: 200px;
        height: 100px;
        animation: water-fill 2s infinite linear;
        background: radial-gradient(
              var(--r1) var(--r2) at top,
              #0000 79.5%,
              #269af2 80%
            )
            center left,
          radial-gradient(
              var(--r1) var(--r2) at bottom,
              #269af2 79.5%,
              #0000 80%
            )
            center center,
          radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%)
            center right,
          #ccc;
        background-size: 50.5% 220%;
        background-position: -100% 0%, 0% 0%, 100% 0%;
        background-repeat: no-repeat;
      }
      @keyframes water-fill {
        33% {
          background-position: 0% 33%, 100% 33%, 200% 33%;
        }
        66% {
          background-position: -100% 66%, 0% 66%, 100% 66%;
        }
        100% {
          background-position: 0% 100%, 100% 100%, 200% 100%;
        }
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Water Loader Animation</h1>
    <div class="water-loader"></div>
  </body>
</html>

Thank you for reading this article. I hope that it helps you creating your own Water Animation CSS-loader Animation using CSS and HTML. See you in next tutorial!