<!doctype html> <html lang='en'> <head> <meta charset='utf-8'> <meta http-equiv='x-ua-compatible' content='ie=edge'> <title>Material Design Gauge</title> <meta name='description' content='Simple Material Design gauge control implemented in pure CSS/HTML'> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel='stylesheet' type='text/css' href='material-gauge.css'> <style> body { background-color: #1d211e; color: #cae0d0; font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: normal; height: 32px; letter-spacing: normal; line-height: 32px; padding-top: 100px; } .center { width: 60%; min-width: 420px; margin: auto; } </style> </head> <body> <div class='center'> <div style='overflow: hidden; display: flex; justify-content: center;'> <div class='gauge gauge--liveupdate' id='gauge' style='float:left;'> <span class='gaugeLabel'>Humidity</span> <div class='gauge__container'> <!-- <div class='gauge__marker'></div> --> <div class='gauge__background'></div> <div class='gauge__center'></div> <div class='gauge__data'></div> <!-- <div class='gauge__needle'></div> --> </div> <div class='gauge__labels mdl-typography__headline'> <span class='gauge__label--low'></span> <span class='gauge__label--spacer'></span> <span class='gauge__label--high'></span> </div> </div> <div class='gauge gauge--liveupdate' id='gauge2' style='float:left;'> <span class='gaugeLabel'>Moisture</span> <div class='gauge__container'> <!-- <div class='gauge__marker'></div> --> <div class='gauge__background'></div> <div class='gauge__center'></div> <div class='gauge__data'></div> <div class='gauge__needle'></div> </div> <div class='gauge__labels mdl-typography__headline'> <span class='gauge__label--low'></span> <span class='gauge__label--spacer'></span> <span class='gauge__label--high'></span> </div> </div> <div class='gauge gauge--liveupdate' id='gauge3' style='float:left;'> <span class='gaugeLabel'>Temperature</span> <div class='gauge__container'> <!-- <div class='gauge__marker'></div> --> <div class='gauge__background'></div> <div class='gauge__center'></div> <div class='gauge__data'></div> <div class='gauge__needle'></div> </div> <div class='gauge__labels mdl-typography__headline'> <span class='gauge__label--low'></span> <span class='gauge__label--spacer'></span></span> <span class='gauge__label--high'></span> </div> </div> </div> </div> <script src='material-gauge.js'></script> <script> var gauge = new Gauge(document.getElementById('gauge')); var gauge2 = new Gauge(document.getElementById('gauge2')); var gauge3 = new Gauge(document.getElementById('gauge3')); //gauge.value(75); //gauge2.value(50); gauge.value(25); gauge2.value(50); gauge3.value(33, 42, '°C'); </script> </body> </html>