Speedometer

Hi friends, in this tutorial you will learn how to create a speed test meter (speedometer) with pure CSS and Jquery animations.

by TrickyUI

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800" rel="stylesheet">
<div class="box">
  <h2 class="mb-4 text-center"> </h2>
  <div class="meter position-relative">
    <ul class="chart-skills" >
      <li>
        <span></span>
      </li>
      <li>
        <span></span>
      </li>
      <li>
        <span></span>
      </li>
      <li>
        <span></span>
      </li>
    </ul>
<div style="width:253px;">
<label style="float:left;">Poor</label>
<label style="float:right">Good</label>

</div>
 
    <img src="https://1.bp.blogspot.com/-46OIskSGdZc/WwzuFQ4Z24I/AAAAAAAAAsE/r-ElKrZKPNARDFGl5bY7-DHo7B-DSeJAgCLcBGAs/s1600/meter-hand.png" alt="" class="meter-hand" id="hand">
  </div>
  <div class="text-center mt-4">
    <div class="speed"><span id="speed" style="display:none">65</span></div>
    <div class="unit">PERFORMANCE</div>
  </div>
</div>

CSS

html {
  font-size: 10px;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: 300;
  color: #656565;
}

.box {
  width: 500px;
  max-width: 90%;
  margin: 0 auto;
  padding: 3rem;
  display: block;
  border-radius: 1.5rem;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 15.84px 0.16px rgba(35, 31, 32, 0.1);
}

.meter {
  width: 188px;
  margin: 30px auto 0;
  position: relative;
}

.meter-hand {
  position: absolute;
  left: 45%;
  bottom: 6px;
  margin-left: -5px;
  z-index: 1;
  transition: all 2s ease-in-out;
  transform-origin: 94% 48%;
}

.speed {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
}

#speed {
  min-width: 300px;
  display: inline-block;
}

.unit {
  font-size: 2rem;
  font-weight: 500;
  color: #bbe697;
}

.meter .num {
  font-size: 1rem;
  font-weight: 600;
  position: absolute;
}

#num_1 {
  left: 25px;
  top: 80px;
}

#num_2 {
  left: 37px;
  top: 56px;
}

#num_3 {
  left: 55px;
  top: 35px;
}

#num_4 {
  left: 87px;
  top: 25px;
}

#num_5 {
  right: 55px;
  top: 35px;
}

#num_6 {
  right: 37px;
  top: 56px;
}

#num_7 {
  right: 25px;
  top: 80px;
}

/* RESET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.chart-skills {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
}

.chart-skills *,
.chart-skills::before {
  box-sizing: border-box;
}

/* CHART-SKILLS STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.chart-skills {
  position: relative;
  width: 250px;
  height: 125px;
  overflow: hidden;
}

.chart-skills::before,
.chart-skills::after {
  position: absolute;
}

.chart-skills::before {
  content: '';
  width: inherit;
  height: inherit;
  border: 45px solid rgba(211, 211, 211, .3);
  border-bottom: none;
  border-top-left-radius: 175px;
  border-top-right-radius: 175px;
}

.chart-skills::after {
  content: '';
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  font-size: 1.1rem;
  font-weight: bold;
  color:...

JavaScript

var speed = $('#speed').text();
$('#hand').animate({
    textIndent: 0
  }, {
    step: function(now) {
      now = speed;
      $('.meter .num').each(function() {
        for (var i = 0; i <= 1000; i++) {
          $('#num_' + (i + 1)).text(i * 30);
        }
      })
      if ((now / 180) > 1) {
        var m = now / 180;
        $('.meter .num').each(function() {
          for (var i = 0; i <= 6; i++) {
            $('#num_' + (i + 1)).text(Math.round(i * 30 * m) * 2);
          }
        })
        $(this).css('-webkit-transform', 'rotate(' + 90 + 'deg)');
      } else {
        $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
      }

      $('#speed').prop('Counter', 0).animate({
        Counter: now
      }, {
        duration: 2000,
        easing: 'linear',
        step: function(now) {
          $('#speed').text(Math.round(now * 100) / 100);
        }
      });
    },
    duration: '1000'
  },
  'linear');