JavaScript Meter Gauge

This JavaScript code snippet helps you to create a meter gauge. It defines a JavaScript function called “rotateDial” that updates the display of a dial and gauge with a random value. The function selects the dial and gauge elements using jQuery and applies a CSS transform to rotate the dial based on the random value. The gauge value is also updated with the random value.

Finally, the function is scheduled to be called every 2 seconds using the setInterval method.

How to Create JavaScript Meter Gauge

Create the HTML structure for meter gauge as follows:

<link href='https://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
<div class="gauge">
			<ul class="meter">
				<li class="low"></li>
				<li class="normal"></li>
				<li class="high"></li>
			</ul>

			<div class="dial">
					<div class="inner">
						<div class="arrow">
						</div>
					</div>			
			</div>

			<div class="value">
				0%
			</div>

		</div>

	<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>

Style the meter gauge using the following CSS styles:

html, body
			{
				padding: 0;
				margin: 0;
			}

			body,
			.dial
			{
				background-color: #000;
				overflow: hidden;
			}

			.gauge
			{
				position: absolute;
				width: 500px;
				height: 500px;
				top: 30px;
				left: 50%;
				margin-left: -250px;
				border-radius: 100%;
				transform-origin: 50% 50%;
				-webkit-transform-origin: 50% 50%;
				-ms-transform-origin: 50% 50%;
				-webkit-transform: rotate(0deg);

			}

			.meter
			{
				margin: 0;
				padding: 0;
			}

			.meter > li
			{
				width: 250px;
				height: 250px;
				list-style-type: none;
				position: absolute;
				border-top-left-radius: 250px;
				border-top-right-radius: 0px;
				transform-origin:  100% 100%;;
				-webkit-transform-origin:  100% 100%;;
				-ms-transform-origin:  100% 100%;;
				transition-property: -webkit-transform;
				pointer-events: none;
			}
.cd__main{
display: block !important;
}

			.meter .low
			{
				transform: rotate(0deg); /* W3C */
				-webkit-transform: rotate(0deg); /* Safari & Chrome */
				-moz-transform: rotate(0deg); /* Firefox */
				-ms-transform: rotate(0deg); /* Internet Explorer */
				-o-transform: rotate(0deg); /* Opera */
				z-index: 8;
				background-color: #09B84F;
			}

			.meter .normal
			{
				transform: rotate(47deg); /* W3C */
				-webkit-transform: rotate(47deg); /* Safari & Chrome */
				-moz-transform: rotate(47deg); /* Firefox */
				-ms-transform: rotate(47deg); /* Internet Explorer */
				-o-transform: rotate(47deg); /* Opera */
				z-index: 7;
				background-color: #FEE62A;
			}

			.meter .high
			{
				transform: rotate(90deg); /* W3C */
				-webkit-transform: rotate(90deg); /* Safari & Chrome */
				-moz-transform: rotate(90deg); /* Firefox */
				-ms-transform: rotate(90deg); /* Internet Explorer */
				-o-transform: rotate(90deg); /* Opera */
				z-index: 6;
				background-color: #FA0E1C;
			}

			
			.dial,
			.dial .inner
			{
				width: 470px;
				height: 470px;
				position: relative;
				top: 10px;
				left: 5px;
				border-radius: 100%;
				border-color: purple;
				z-index: 10;
				transition-property: -webkit-transform;
				transition-duration: 1s;
				transition-timing-function: ease-in-out;
				transform: rotate(0deg); /* W3C */
				-webkit-transform: rotate(0deg); /* Safari & Chrome */
				-moz-transform: rotate(0deg); /* Firefox */
				-ms-transform: rotate(0deg); /* Internet Explorer */
				-o-transform: rotate(0deg); /* Opera */
			}

			.dial .arrow
			{
				width: 0; 
				height: 0; 
				position: absolute;
				top: 214px;
				left: 24px;
				border-left: 5px solid transparent;
				border-right: 5px solid transparent;
				border-bottom: 32px solid #FFFFFF;
				-webkit-transform: rotate(-88deg); /* Safari & Chrome */
				-moz-transform: rotate(88deg); /* Firefox */
				-ms-transform: rotate(88deg); /* Internet Explorer */
				-o-transform: rotate(88deg); /* Opera */

			}

			.gauge .value
			{
				font-family: 'Josefin Slab', serif;
				font-size: 50px;
				color: #ffffff;
				position: absolute;
				top: 142px;
				left: 45%;
				z-index: 11;
			}

Finally, add the following JavaScript function for its functionality:

var dial = $(".dial .inner");
	var gauge_value = $(".gauge .value");

		function rotateDial()
		{
			var deg = 0;
			var value = Math.round(Math.random()*100);
			deg = (value * 177.5) / 100;

			gauge_value.html(value + "%");

			dial.css({'transform': 'rotate('+deg+'deg)'});
		    dial.css({'-ms-transform': 'rotate('+deg+'deg)'});
		    dial.css({'-moz-transform': 'rotate('+deg+'deg)'});
		    dial.css({'-o-transform': 'rotate('+deg+'deg)'}); 
		    dial.css({'-webkit-transform': 'rotate('+deg+'deg)'});
		}

		setInterval(rotateDial, 2000);

That’s all! hopefully, you have successfully created the JavaScript meter gauge. If you have any questions or suggestions, feel free to comment below.