CSS radial progress bar - Animate All the Things!

by Premchand R

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
<div class="radial-progress" data-progress="0">
  <div class="circle">
    <div class="mask full">
      <div class="fill"></div>
    </div>
    <div class="mask half">
      <div class="fill"></div>
      <div class="fill fix"></div>
    </div>
    <div class="shadow"></div>
  </div>
  <div class="inset">
    <div class="percentage">
      <div...

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
.radial-progress {
  @circle-size: 120px;
  @circle-background: #d6dadc;
  @circle-color: #97a71d;
  @inset-size: 90px;
  @inset-color: #fbfbfb;
  @transition-length: 1s;
  @shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
  @percentage-color: #97a71d;
  @percentage-font-size: 22px;
  @percentage-text-width: 57px;
  margin: 50px;
  width: @circle-size;
  height: @circle-size;
  background-color: @circle-background;
  border-radius: 50%;
  .circle {
    .mask,
    .fill,
    .shadow {
      width: @circle-size;
      height: @circle-size;
      position: absolute;
      border-radius: 50%;
    }
    .shadow {
      box-shadow: @shadow inset;
    }
    .mask,
    .fill {
      -webkit-backface-visibility: hidden;
      transition: -webkit-transform @transition-length;
      transition: -ms-transform @transition-length;
      transition: transform @transition-length;
      border-radius: 50%;
    }
    .mask {
      clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
      .fill {
        clip: rect(0px, @circle-size/2, @circle-size, 0px);
        background-color: @circle-color;
      }
    }
  }
  .inset {
    width: @inset-size;
    height: @inset-size;
    position: absolute;
    margin-left: (@circle-size - @inset-size)/2;
    margin-top: (@circle-size - @inset-size)/2;
    background-color: @inset-color;
    border-radius: 50%;
    box-shadow: @shadow;
    .percentage {
      height: @percentage-font-size;
      width: @percentage-text-width;
      overflow: hidden;
      position: absolute;
      top: (@inset-size - @percentage-font-size) / 2;
      left: (@inset-size - @percentage-text-width) / 2;
      line-height: 1;
      .numbers {
        margin-top: -@percentage-font-size;
        transition: width @transition-length;
        span {
          width: @percentage-text-width;
          display: inline-block;
         ...

JavaScript

$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
window.randomize = function() {
  $('.radial-progress').attr('data-progress', Math.floor(Math.random() * 100));
}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);

// Read more here: https://medium.com/@andsens/radial-progress-indicator-using-css-a917b80c43f9