Jquery Animated Thermometer With Loading Effect

File Size:1.32 KB
Views Total:620
Last Update:December 26, 2017
Publish Date:December 26, 2017
Official Website:Go to website

This thermometer plugin is use easy and fast jQuery plugin for creating an vertical progress bar with custom CSS animations, which can be used for thermometer, loading bar, or progress meter showing in jquery. As use for showing temperature bar , over loading bar , and many more types.

How It Use :

1.  Use and include the files into your Jquery install path:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Bebas_400.font.js" type="text/javascript"></script>
		<script type="text/javascript">
			Cufon('.cn_wrapper h1,h2', {
				textShadow: '-1px 1px black'

2. Use simple Html code :

<div id="thermometer">
            <div class="track">
                <div class="goal" style="height: 100%;width: 150px;">
                    <div class="amount" id="goalAmount" style="height: 20%;"><num>500</num> <span>Burning</span></div>
                     <div class="amount" style="height: 20%;"><num>400</num> <span>I thirst</span></div>
                     <div class="amount" style="height: 20%;"><num>300</num> <span>I have hot</span></div>
                     <div class="amount" style="height: 20%;"><num>200</num> <span>It is good</span></div>
                     <div class="amount" style="height: 20%;"><num>100</num> <span>It's cold</span></div>
                <div class="progress"">
                    <div style="display: block;width: 150px;" class="amount" id="progessAmount">400 </div>
        <div class="bulb"><div class="inner-bulb"></div></div>

Done 🙂