A Pen by Jesse Hattabaugh.

DpzsG.markdown

Circular Percentage Gauge Controlled by CSS

A Pen by Jesse Hattabaugh on CodePen.

License.

index.html

<div class="gauge">
  <div class="left">
    <div class="rotator">
      <div class="circle"></div>
    </div>
  </div>
  <div class="right">
    <div class="rotator">
      <div class="circle"></div>
    </div>
  </div>
  <div class="circle top"></div>
</div>

<input class="control" type="range" min="0" max="100" value="0">

script.js

$('.control').on('change', function (e) {
  var percent = e.target.value;
  var gauge = $('.gauge').first();
  var left = gauge.children('.left').first().children('.rotator').first();
  var right = gauge.children('.right').first().children('.rotator').first();
  var deg = 360 / 100 * percent;
  var top = gauge.children('.top').text(percent);
  
  left.css('transform', 'rotate(' + Math.max(deg, 180) + 'deg)');
  right.css('transform', 'rotate(' + Math.min(-180 + deg, 0) + 'deg)');
});

style.scss

@import "compass";
$gauge-size: 20em;
$gauge-color: orange;
$gauge-thickness: 20%;

.gauge {
  display: block;
  position: relative;
  width: $gauge-size;
  height: $gauge-size;
  .circle {
    position: absolute;
    @include border-radius(50%);
  }
  .left, .right {
    position: absolute;
    width: 50%;
    height: 100%;
    overflow: hidden;
    .rotator {
      position: relative;
      height: 100%;
      overflow: hidden;
      .circle {
        width: 200%;
        height: 100%;
        top: 0;
        background-color: $gauge-color;
      }
    }
  }
  .left {
    left: 0%;
    .rotator {
      @include transform-origin(right, 50%);
      @include transform(rotate(180deg));
      .circle {
        left: 0;
      }
    }
  }
  .right {
    right: 0%;
    .rotator {
      @include transform-origin(left, 50%);
      @include transform(rotate(-180deg));
      .circle {
        left: -100%;
      }
    }
  }
  .top {
    //opacity: 0; // pie chart
    background-color: white;
    top: $gauge-thickness / 2;
    left: $gauge-thickness / 2;
    width: 100% - $gauge-thickness;
    height: 100% - $gauge-thickness;
    
    color: $gauge-color;
    font-size: $gauge-size / 2;
    font-family: Helvetica;
    text-align: center;
    box-sizing: border-box;
    padding-top: .25em;
  }
}

.control {
  width: 100%;
}