CSS radial progress bar - Prettifying

by dgrebb

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
<div class="card">
  <div class="gauge-wrapper">
    <div class="radial-progress" data-speed-max="100">
      <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>
      <svg class="gauge-bottom-mask" viewBox="0 0 120 120" class="gauge" fill="none" stroke-width="6">
        <circle r="60" cx="50%" cy="50%" stroke-dasharray="104 360" transform="rotate(170 60 60)"></circle>
      </svg>
    </div>
  </div>
</div>

CSS

.card {
  background: #fff;
}

@radial-size: 175px;
@radial-stroke: 6px;

.gauge-wrapper {
  position: relative;
  width: @radial-size;
  .gauge-text{
    position: absolute;
    margin: auto;
    text-align: center;
    display: block;
    top:0; right: 0; bottom: 0; left: 0;
    z-index: 2;
  }
}

.radial-progress {
  
  display: inline-block;
  
  -ms-transform: rotate(230deg); /* IE 9 */
  -webkit-transform: rotate(230deg); /* Chrome, Safari, Opera */
  transform: rotate(230deg);

	/* margin: 10px; */
	width:  @radial-size;
	height: @radial-size;

	background-color: #d6dadc;
	border-radius: 50%;
  
}

.mask, .fill, .shadow {
  width:    100%;
  height:   100%;
  position: absolute;
  border-radius: 50%;
}
.shadow {
  // box-shadow: 6px 6px 10px rgba(0,0,0,0.2) inset;
}
.mask, .fill {
  -webkit-backface-visibility: hidden;
  transition: -webkit-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s;
}
.mask {
  clip: rect(0px, 175px, 175px, 175px/2);
  /* clip-path: inset(0px 120px 120px 120px/2); */
  .fill {
    clip: rect(0px, 175px/2, 175px, 0px);
    /* clip-path: inset(0px 120px/2 120px 0px); */
    background: linear-gradient(to top, #5736cb 0%, #aa2dc1 35%, #d9003a 100%);
  }
}



.circle .fill {
  background: linear-gradient(8deg, #5736cb 0%, #aa2dc1 65%, #d9003a 100%);
}

.mask.full .fill {
  background: linear-gradient(11deg, #be1a88 0%,  #d9003a 40%);
}


.inset {
  width:       (@radial-size - @radial-stroke);
  height:      (@radial-size - @radial-stroke);
  position:    absolute;
  margin-left: @radial-stroke/2;
  margin-top:  @radial-stroke/2;

  background-color: #fbfbfb;
  border-radius: 50%;
  // box-shadow: 6px 6px 10px rgba(0,0,0,0.2);
}

.gauge-bottom-mask {
  
  circle {
    fill: none;
    stroke: #fff;
  }
}

JavaScript

$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
var transform_styles = ['-webkit-transform', '-ms-transform', 'transform'];
var setGauge = function(e) {
  
  e.preventDefault();
	
	var gaugeAmount = $('.radial-progress', this).attr('data-speed-max');
  gaugeAmount = (130 / 100) * gaugeAmount;

  var rotation = gaugeAmount;
  var fill_rotation = rotation;
  var fix_rotation = rotation * 2;
    
  for(i in transform_styles) {
    $('.circle .fill, .circle .mask.full', this).css(transform_styles[i], 'rotate(' + fill_rotation + 'deg)');
    //$('.circle .fill.fix', this).css(transform_styles[i], 'rotate(' + fix_rotation + 'deg)');
  }
}

$('.gauge-wrapper').click(setGauge);