Generated by SassMeister.com.

SassMeister-input-HTML.haml

.upload-progress.per90
  .pie
    .first
    .last

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

@import "compass";

* {
  @include box-sizing(border-box);
}

$width: 200px;
$height: $width;
$border-width: 5px;
$color: grey;
$border-color: $color;

.upload-progress{
  position: relative;
  width:  $width;
  height: $height;
  margin: $border-width;
  
  &:before{
    content: "";
    position: absolute;
    border: $border-width solid grey;
    left:   -($border-width - 1);
    right:  -($border-width - 1);
    bottom: -($border-width - 1);
    top:    -($border-width - 1);
    z-index: 1;
    border-radius: 100%;
  }
}

.pie{
  position: absolute;
  top: 50%;
  margin-top: -($height / 2);
  left: 50%;
  margin-left: -($width / 2);
  width:  $width;
  height: $height;
  overflow: hidden;
}

.first,
.last{
  width:  $width / 2;
  height: $height;
  background: grey;
}

.first{
  border-top-left-radius:    $width / 2;
  border-bottom-left-radius: $width / 2;
  -webkit-transform-origin: 100% 50%;
  position: absolute;
}

.last{
  border-top-right-radius:    $width / 2;
  border-bottom-right-radius: $width / 2;
  -webkit-transform-origin: 0% 50%;
  margin-left: $width / 2;
  position: relative;
  z-index: 1;
  -webkit-transform: rotate(180deg);
}

// Graph Builder

$segments: 10;
$percent: floor(100 / $segments);
$deg: 0;

@for $i from 0 through $segments {
  @if ($i <= ($segments / 2) ) {
    .per#{$i * $percent} .pie {
      clip: rect(0,$width, $width, $width / 2);
    }
    .per#{$i * $percent} .first{  
      -webkit-transform: rotate(#{$deg}deg);
    }
    
  } @else {
    .per#{$i * $percent} .pie {
      clip: rect(0,$width, $width, 0px);
    }
    .per#{$i * $percent} .first{  
      -webkit-transform: rotate(180deg);
    }
    .per#{$i * $percent} .last{  
      -webkit-transform: rotate(#{($deg - 180)}deg);
    }
  }
  $deg: $deg + floor((360 / $segments)); // adds increment degree
}

SassMeister-output.css

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.upload-progress {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 5px;
}
.upload-progress:before {
  content: "";
  position: absolute;
  border: 5px solid gray;
  left: -4px;
  right: -4px;
  bottom: -4px;
  top: -4px;
  z-index: 1;
  border-radius: 100%;
}

.pie {
  position: absolute;
  top: 50%;
  margin-top: -100px;
  left: 50%;
  margin-left: -100px;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.first,
.last {
  width: 100px;
  height: 200px;
  background: grey;
}

.first {
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  -webkit-transform-origin: 100% 50%;
  position: absolute;
}

.last {
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  -webkit-transform-origin: 0% 50%;
  margin-left: 100px;
  position: relative;
  z-index: 1;
  -webkit-transform: rotate(180deg);
}

.per0 .pie {
  clip: rect(0, 200px, 200px, 100px);
}

.per0 .first {
  -webkit-transform: rotate(0deg);
}

.per10 .pie {
  clip: rect(0, 200px, 200px, 100px);
}

.per10 .first {
  -webkit-transform: rotate(36deg);
}

.per20 .pie {
  clip: rect(0, 200px, 200px, 100px);
}

.per20 .first {
  -webkit-transform: rotate(72deg);
}

.per30 .pie {
  clip: rect(0, 200px, 200px, 100px);
}

.per30 .first {
  -webkit-transform: rotate(108deg);
}

.per40 .pie {
  clip: rect(0, 200px, 200px, 100px);
}

.per40 .first {
  -webkit-transform: rotate(144deg);
}

.per50 .pie {
  clip: rect(0, 200px, 200px, 100px);
}

.per50 .first {
  -webkit-transform: rotate(180deg);
}

.per60 .pie {
  clip: rect(0, 200px, 200px, 0px);
}

.per60 .first {
  -webkit-transform: rotate(180deg);
}

.per60 .last {
  -webkit-transform: rotate(36deg);
}

.per70 .pie {
  clip: rect(0, 200px, 200px, 0px);
}

.per70 .first {
  -webkit-transform: rotate(180deg);
}

.per70 .last {
  -webkit-transform: rotate(72deg);
}

.per80 .pie {
  clip: rect(0, 200px, 200px, 0px);
}

.per80 .first {
  -webkit-transform: rotate(180deg);
}

.per80 .last {
  -webkit-transform: rotate(108deg);
}

.per90 .pie {
  clip: rect(0, 200px, 200px, 0px);
}

.per90 .first {
  -webkit-transform: rotate(180deg);
}

.per90 .last {
  -webkit-transform: rotate(144deg);
}

.per100 .pie {
  clip: rect(0, 200px, 200px, 0px);
}

.per100 .first {
  -webkit-transform: rotate(180deg);
}

.per100 .last {
  -webkit-transform: rotate(180deg);
}

SassMeister-rendered.html

<div class='upload-progress per90'>
  <div class='pie'>
    <div class='first'></div>
    <div class='last'></div>
  </div>
</div>