Animated Guage

HTML

<div class="guage-container">
    <div class="guage-border">
        <div class="guage-ticker"></div>
        <div class="guage-pin"></div>
        <div class="guage-screw"></div>
        <div class="guage-text">10</div>
    </div>
</div>

SCSS

@mixin semi-circle($width, $background){
    box-sizing: border-box;
    position: relative;
    height: $width / 2;
    width: $width;
    border-radius: $width $width 0 0;
    background: $background;
    user-select: none;
    -webkit-user-select: none;
}

@font-face {
    font-family:"Digital-7";
    src: url("https://cdn.rawgit.com/Mikhus/canv-gauge/master/fonts/digital-7-mono.ttf")
}

body{
    background-color: black;
}

.guage-container{
    @include semi-circle(250px, linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 33%,#474747 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%));
    padding: 14.5px 25px;
    font-family: "Digital-7";
}
.guage-border{
    @include semi-circle(200px, linear-gradient(135deg, #616161 0%,#6d6d6d 12%,#787878 33%,#5d5d5d 60%,#444444 76%,#373737 91%,#2f2f2f 100%));
    border: 2px solid #333;
    padding: 9px 8px;
}
.guage-ticker{
    @include semi-circle(180px, transparent);
    border-top: 3px dotted white;
}
.guage-screw{
    width: 25px;
    height: 25px;
    background: -webkit-radial-gradient(center, ellipse cover, #222 0%,#444 87%,#222 100%);
    background: -ms-radial-gradient(center, ellipse cover, #222 0%,#444 87%,#222 100%);
    background: radial-gradient(center, ellipse cover, #222 0%,#444 87%,#222 100%);
    margin: -20px auto 0 auto;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}
.guage-pin{
    border-style: solid;
    border-width: 0 3px 77px 3px;
    border-color: transparent transparent red transparent;
    position: absolute;
    left: 95px;
    top: 15px;
    z-index: 1;
    transform-origin: 50% 100%;
}
.guage-text{
    position: absolute;
    width: 92%;
    text-align: center;
    color: #fff;
    font-size: 50px;
    top: 30px;
    user-select: none;
    -webkit-user-select: none;
}

JavaScript

var pinValue = mTrack = 0,
	iterateValue = 180/100,
    guageText = $('.guage-text'),
    guagePin = $('.guage-pin');

function setPin(value){
    value = Math.round(value);
    var percentage = Math.round((value * 100) / 180);
    if(value >= 0 && value <= 180){
        guageText.html(percentage || 0);
        guagePin.css('transform', 'rotate(' + (value - 90) + 'deg)');
    }
}

$('.guage-container').on("mousemove", function(e) {
  if(e.buttons){
    if(e.clientY < mTrack){
      if(pinValue <= 180){
      	setPin(pinValue += iterateValue);
      }
    }else if(e.clientY > mTrack){
      if(pinValue >= 0){
      	setPin(pinValue -= iterateValue);
      }
    }
    mTrack = e.clientY;
  }
});

setPin(0);