Animated Test Tube Progress Bar In Pure CSS

Author: bozworks
Views Total: 492 views
Official Page: Go to website
Last Update: October 20, 2021
License: MIT


Animated Test Tube Progress Bar In Pure CSS


An animated test tube style progress bar written in pure CSS.

See it in action:

How to use it:

1. Load the main stylesheet test-tube.css in the document.

<link rel=”stylesheet” href=”dist/test-tube.css” />

2. The required HTML structure for the test tube.

<div class="tube">
  <div class="shine"></div>
  <div class="body">
    <div class="liquid">
      <div class="percentage"></div>
  <div class="meter">
  <div class="bubbles">

3. Override the default percentage value in the CSS.

:root {
  --tube-percentage: 80%;
  --tube-title: "80%";
  --tube-color: #9198e5;

See also  List of Media Queries for Devices

Leave a Reply

Your email address will not be published. Required fields are marked *