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