Animated Test Tube Progress Bar In Pure CSS

Category: CSS & CSS3 , Loading | October 20, 2021
Views Total:1,523 views
Official Page:Go to website
Last Update:October 20, 2021


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;

You Might Be Interested In:

Leave a Reply