.gauge
  each val in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
    div(class='tick tick-'+val) 
  .needle
   
 p
   click gauge to activate

@import "bourbon";

.gauge{
  width: 300px;
  height: 300px;
  border-radius: 300px;
  @include linear-gradient( lightgrey, grey );
  position: relative;
  @include box-shadow( 2px 2px 3px black );
  &::after,
  &::before{
    content: '';
    border-radius: 300px;
    position: absolute;
  }
  &::before{
    background: rgba( 0, 0, 0, .2);
    top: 6px;
    left: 6px;
    bottom: 6px;
    right: 6px;
  }
  &::after{
    @include linear-gradient( lightgrey, white );
    @include box-shadow( inset 0 0 8px darkblue );
    top: 12px;
    left: 12px;
    bottom: 12px;
    right: 12px;
  }
}
.tick{
  position: absolute;
  top: 145px;
  left: 12px;
  width: 60px;
  height: 10px;
  background: green;
  z-index: 1;
  transform-origin: 138px 5px;
  @include linear-gradient( #666, #ccc );
  border-radius: 3px;
  @include box-shadow( 0 0 5px darkblue );
}

@for $i from 0 through 12 {
  .tick-#{$i} { 
    transform: rotate( -30deg + ( 20deg * $i ) ); 
  }
}

.needle{
  position: absolute;
  top: 145px;
  left: 24px;
  width: 126px;
  height: 10px;
  z-index: 1;
  transform-origin: 126px 5px;
  transform: rotate( 0deg );
  @include transition( 1.7s all ease-in-out );
  &::before{
    content:""; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 0; 
    height: 0; 
    border-top: 6px solid transparent; 
    border-right: 120px solid red; 
    border-bottom: 6px solid transparent;
  }
  &.current{
    transform: rotate( 117deg );
  }
}

$('.gauge').click(function(){
  $('.needle').toggleClass('current');
});