Industrial JS

Simple Tank example control by input

by aflynt

HTML

<script src="https://brennana.github.io/industrial-js/js/industrial.js"></script>
<link rel="stylesheet" href="https://brennana.github.io/industrial-js/css/industrial.css">


<h3>SouthernLifeStyle Stats</h3>
  <div>
	  							 	 <div class="industrial thermometer size one">
                    
			                            <span class="ticks" data-amount="10"></span>
                                 
			                            <div class="space"></div>
			                            <div class="meter"></div>
                                 
			                        </div>
                 <div id="line">
                   <div id="number">
                 
                 10,000</div>
<div id="legend">2016 YTD</div>
                 </div>              
                              
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto);
 h1, input, html {
    font-family:'Roboto', sans-serif;
}
label {
    margin: 7px;
}

.industrial > .meter {
	height: 100%;
	width: 100%;
	background-color:#dd2d34 !important;
	/*background: -webkit-linear-gradient(left, rgba(221, 45, 52, 1), rgba(76, 69, 233,.75));
	background: -moz-linear-gradient(left, rgba(95, 100, 221, 0.75), rgba(76, 69, 233,.75));
	background: -o-linear-gradient(left, rgba(95, 100, 221, 0.75), rgba(76, 69, 233,.75));
	background: -ms-linear-gradient(left, rgba(95, 100, 221, 0.75), rgba(76, 69, 233,.75));
	background: linear-gradient(left, rgba(95, 100, 221, 0.75), rgba(76, 69, 233,.75));*/
}

#line { border-bottom: 1px solid #000;height:1px;position:relative;top:-48px; }

#number {
    float:right;
    position: absolute;
    right: 0px;
    top: -17px;
}

#legend {
  position: absolute;
    right: 0px;
    top: 2px;
}

.ticks {display:none;}

JavaScript

// Time to use some industrial.js!
// This is where we'll initialize our components, 
// and change values with a small value simulator.


$(document).ready(function() {
    setTimeout(function() {
        $(".industrial").industrial({});
    },250);

        $(".industrial.thermometer").each(function() {
           // $(this).industrial(Math.floor(Math.random()*100));
            $(this).industrial(40);
        });
       
   
});