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="gauge-wrapper">
  <div class="radial-progress" data-speed-max="100">
    <div class="inset">
    </div>
  </div>
</div>

CSS

@radial-size: 120px;

.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%;
  
}
.inset {
  width:       114px;
  height:      114px;
  position:    absolute;
  margin-left: (120px - 114px)/2;
  margin-top:  (120px - 114px)/2;

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

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