A Pen by Clément Noterdaem.

index.haml

/ from http://cssdeck.com/labs/progress-circle

%div.progress
  %div.hide
  %div.active
  %div.active2

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

script.js

/* *****
 * JS only for automatic responsive size
 * *****/
$(document).ready(function() {
  $('.progress').css("height", $('.progress').width() + "px");
  $('.progress').css("font-size", ($('.progress').width() / 5) + "px");
  $('.progress').css("line-height", ($('.progress').width() / 100 * 90) + "px");
  $(window).resize(function() {
    $('.progress').css("height", $('.progress').width() + "px");
    $('.progress').css("font-size", ($('.progress').width() / 5) + "px");
    $('.progress').css("line-height", ($('.progress').width() / 100 * 90) + "px");
  });
});

SCSS-Progress-Circle.markdown

SCSS Progress Circle

Coming from http://cssdeck.com/labs/progress-circle

A Pen by Clément Noterdaem on CodePen.

License.

style.scss

@import "compass";
$progress: 42; // 0 - 100

$color-active: #2ecc71;
$color-inactive: #eee;
$color-bg: #34495e;
$color-font: #eee;

@import url(http://fonts.googleapis.com/css?family=Lato:300);

* {
  margin: 0;
  padding: 0;
  border: 0;
}

html, body {
  min-height: 100%;
}

body {
  background: $color-bg;
}

.progress {
  width: 50%;
  background: $color-inactive;
  border-radius: 50%;
  position: absolute;
  font-family: 'Lato', sans-serif;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  box-shadow: 0px 0px 20px rgba(#000, 0.5);
  border: 2px solid $color-bg;
  overflow: hidden;
  &:before {
    content: $progress + "%";
    text-align: center;
    color: $color-font;
    width: 90%;
    height: 90%;
    background: $color-bg;
    position: absolute;
    border-radius: 50%;
    left: 5%;
    top: 5%;
    z-index: 1000;
    box-shadow: inset 0px 0px 20px rgba(#000, 0.5);
    border: 2px solid $color-bg;
    box-sizing: border-box;
  }
  .hide {
    height: 100%;
    width: 50%;
    position: absolute;
    left: 50%;
    top: 0;
    background: $color-inactive;
    z-index: 200;
    transform-origin: left center;
    $deg: (360 / 100) * $progress;
    transform: rotate($deg + deg);
  }
  .active, .active2 {
    width: 50%;
    height: 100%;
    background: $color-active;
    position: absolute;
    @if $progress > 50 {
      z-index: 300
    }
    left: 50%;
    top: 0;
  }
  @if $progress > 50 {
    .active2 {
      transform-origin: left center;
      $deg: (360 / 100) * ($progress - 50);
      transform: rotate($deg + deg);
    }
  }
}