CSS radial progress indicator - The Basics

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300, 400" rel="stylesheet">

<body style="background-color: rgba(63, 186, 233, 1)">
  <div id="wrapper">
    <div class="speedometer">
      <div class="mask full">
        <div class="fill"></div>
      </div>
      <div class="mask half">
        <div class="fill"></div>
        <div class="fill fix"></div>
      </div>
    </div>
    <div class="inset"></div>
    <div class="cover"></div>
    <div class="label">
      <span class="middle">o</span>
      <span class="deg0">100</span>
      <span class="deg45">120</span>
      <span class="deg135">0</span>
      <span class="deg180">20</span>
      <span class="deg225">40</span>
      <span class="deg270">60</span>
      <span class="deg315">80</span>
    </div>
    <div class="bar">
      <span class="middle"></span>
      <span class="deg0"></span>
      <span class="deg45"></span>
      <span class="deg135"></span>
      <span class="deg180"></span>
      <span class="deg225"></span>
      <span class="deg270"></span>
      <span class="deg315"></span>
    </div>
    <div class="measure">
      <div class="needle"></div>
      <div class="needle2"></div>
      <div class="bulb"></div>
    </div>
    <div class="counterWrapper">
      <div class="counter">80</div>
    </div>
    <div class="iopsWrapper">
      <div id="iops">x1,000<br>OPS</div>
    </div>
    <div class="logoWrapper">
      <div id="logo">GridDB</div>
    </div>
  </div>

</body>

CSS

#wrapper {
  position: absolute;
  height: 260px;
  width: 260px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 2px solid red;
  overflow: hidden;
}

.speedometer {
  border-radius: 50%;
  width: 260px;
  height: 260px;
  background-color: #d6dadc;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.speedometer .mask,
.fill {
  width: 260px;
  height: 260px;
  position: absolute;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
  border-radius: 50%;
  transition: -webkit-transform 1s;
  transition: -ms-transform 1s;
  -webkit-transition: -webkit-transform 1s;
  -o-transition: transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
}

.speedometer .mask {
  clip: rect(0px, 260px, 260px, calc(260px/2));
}

.mask .fill {
  /* rect(<top>, <right>, <bottom>, <left>) */
  clip: rect(0px, calc(260px/2), 260px, 0px);
  background-color: white;
}

.inset {
  width: 240px;
  height: 240px;
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(63, 186, 233, 1);
  border-radius: 50%;
}

.cover {
  width: 240px;
  height: 240px;
  position: absolute;
  top: -4px;
  left: -3px;
  border-right: 13px solid transparent;
  border-bottom: 13px solid rgba(63, 186, 233, 1);
  border-left: 13px solid transparent;
  border-top: 13px solid transparent;
  border-radius: 50%;
}

.label {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  /* border: dashed 1px; */
}

.label span {
  display: block;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  margin: -2em;
  text-align: center;
  vertical-align: middle;
  line-height: 4em;
  font-size: 14px;
  font-weight: bold;
  color: rgba(63, 186, 233, 1);
  /* color: white; */
}

.deg0 {
  -webkit-transform:...

JavaScript

$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
var transform_styles = ['-webkit-transform', '-moz-transform', '-ms-transform', '-o-transform', 'transform'];
window.randomize = function() {
  var rotation = Math.floor(113);
  var fill_rotation = rotation;
  var fix_rotation = rotation * 2;
    var angle = (rotation * 2) - 135;
  var angle2 = angle - 2;
  for (var i in transform_styles) {
    $('.speedometer .fill, .mask.full').css(transform_styles[i], 'rotate(' + fill_rotation + 'deg)');
    $('.fill.fix').css(transform_styles[i], 'rotate(' + fix_rotation + 'deg)');
    $('.measure .needle').css(transform_styles[i], 'rotate(' + angle + 'deg)');
  }

  
  var style = document.documentElement.appendChild(document.createElement("style"));

  var rule2 = "move2 {0% {-webkit-transform: rotate(" + angle2 + "deg" + ");-ms-transform: rotate(" + angle2 + "deg" + ");transform: rotate(" + angle2 + "deg" + ");opacity:1;} 100% {-webkit-transform: rotate(" + angle + "deg" + ");-ms-transform: rotate(" + angle + "deg" + ");transform: rotate(" + angle + "deg" + ");opacity:1;}}";
  if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit
    style.sheet.insertRule("@-webkit-keyframes " + rule2, 0);
  } else if (CSSRule.MOZ_KEYFRAMES_RULE) { // Mozilla
    style.sheet.insertRule("@-moz-keyframes " + rule2, 0);
  } else if (CSSRule.KEYFRAMES_RULE) { // W3C
    style.sheet.insertRule("@keyframes " + rule2, 0);
  }

}
setTimeout(window.randomize, 200);

//counter

$({
  Counter: 0
}).animate({
  Counter: $('.counter').text()
}, {
  duration: 1000,
  easing: 'swing',
  step: function() {
    $('.counter').text(Math.ceil(this.Counter));
  }
});