CSS radial progress bar - But How Much is That?

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

by craigrice

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
<div id="radial-progress" 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">
  <img id="inside-image" src="https://res.cloudinary.com/saasquatch/image/upload/v1527115398/program-reward-header_aibcif.png">
	  <div class="percentage"></div>
	</div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);

:root {
  --completion-decimal: 0;
}

.radial-progress {
  @circle-size: 200px;
  @circle-background: #d6dadc;
  @circle-color: #ffb743;
  @inset-size: (@circle-size * .85);
  @inset-color: #fff;
  @transition-length: 1s;
  @shadow: 6px 6px 10px rgba(0,0,0,0.2);
  @percentage-color: #ffb743;
  @percentage-font-size: 20px;
  @percentage-text-width: 57px;

  max-width:  @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 {
      /* hide bottom of this 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-path: polygon(50% 0, 50% 50%, 0 100%, 0 100%, 0 0);
      .fill {
        clip-path: polygon(0 100%, 100% 100%, 100% 0, 50% 0, 50% 50%);
        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%;
    /* hide bottom of this shadow */  
    box-shadow: @shadow;
    #inside-image {
      opacity: var(--completion-decimal);
      animation-name: fadeInOpacity;
      animation-iteration-count: 1;
      animation-timing-function: ease-in;
      animation-duration: 1s;
      width: @inset-size / 2;
      margin-left: (@inset-size / 4);
      margin-top:  (@circle-size - @inset-size);
    }
    @keyframes fadeInOpacity {
      0% {
       ...

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);

var insideImage = document.querySelector('#inside-image');

insideImage.style.setProperty('--completion-decimal', 1);


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