Press "Enter" to skip to content

Animated Test Tube Works With CSS and HTML Elements

Animated test tube works with CSS and HTML elements only, adjustable level and color.

jquery animated progress bar with percentage, horizontal progress bar with dots css, bs circle progress bar animation, progress bar animation, animate progress bar

How to make use of it:

1. Load the test-tube.css main stylesheet into 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>
  </div>
  <div class="meter">
    <div>100</div>
    <div>80</div>
    <div>60</div>
    <div>40</div>
    <div>20</div>
  </div>
  <div class="bubbles">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

3. Override the default percentage value in CSS.

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

test tube style progress bar

Animated Test Tube Progress Bar In Pure CSS, test-tube.css Plugin/Github, svg progress bar


See Demo And Download

Official Website(bozworks): Click Here

This superior jQuery/javascript plugin is developed by bozworks. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

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