Onur Boz

Test-tube.css

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

Test-tube.css

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

Please reach the github project page or demo page.

Preview
Animasyonlu test tüpü, yalnızca CSS ve HTML öğeleriyle çalışır, seviye ve renk ayarlanabilir.

CDN

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/bozworks/test-tube.css@master/dist/test-tube.css"
/>

HTML Structure

<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>