Tank gauge

A value as liquid in a glass tank: the level springs to it, the surface tilts with the speed and ripples as it settles, and drops splash when it fills.

enhancer
gauge
meter
progress
slider
liquid
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Tank gauge example

Water tank 60% Fill

Code

It follows the controls above: change an option and the code changes with it.

<script src="https://search.axi0.io/axi0/motion/motion.js" defer></script>

<div class="demo-row">
  <label class="demo-card">Water tank <meter data-motion="tank-gauge" min="0" max="100" value="60">60%</meter></label>
  <label class="demo-card">Fill <input type="range" data-motion="tank-gauge" data-motion-color="#4ea1ff" min="0" max="100" value="35"></label>
</div>

import { TankGauge } from "./motion/react/TankGauge";

<TankGauge>Your content</TankGauge>

<script setup lang="ts">
import TankGauge from "./motion/vue/TankGauge.vue";
</script>

<template>
  <TankGauge>Your content</TankGauge>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "tank-gauge";

The wrappers: TankGauge.tsx (React, TypeScript) and TankGauge.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-color`	auto	the liquid's color; empty takes the accent
`data-motion-unit`	`%`	written after the number

- The real element stays in the page, visually hidden: a meter or progress bar is read with its label and value; a range input keeps its label, its keys (arrows, Page Up, Page Down, Home, End), the value screen readers announce and its form field. The tank is a picture of it, hidden from screen readers. - On a range input, pressing on the tank focuses the input and sets the value by height; dragging up and down changes it. Focus draws a ring around the tank. - The number sits in the liquid in dark text on the liquid's color (or above the surface in the page's text color when the tank is low), so it keeps its contrast. - Reduced motion moves the level at once, with no tilt, ripple or splash. Reduced motion shows every state at once, with no movement, and stops anything that would move on its own. Frame loops and CSS animations pause off screen and in hidden tabs. Only transform, opacity and paint animate, so nothing around it moves.

Size

tank-gauge.js is 2.6 KB gzip, with components-kit.js 4.0 KB it needs. A page loads the loader (2.9 KB) and core.js (1.4 KB) once, whatever it uses.