Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="pie-timer deg-0"></div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----



@mixin simple-pie-chart($size, $current-value, $total-value, $chart-color: grey, $background-color: white) {
  // Variables
  $percentage: $current-value/$total-value;
  
  position: relative;
  width: $size;
  height: $size;

%under-half-before {
    left: $size/2; 
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    -webkit-transform-origin: left center;
    transform-origin: left center; 
};
%over-half-before {
    left: 0;    
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center; 
  }

  @for $i from 0 to 360 {
    @if $i < 180 {
      .deg-#{$i} {
        @extend %under-half-before;
      }
    }
    @else {
      @extend %over-half-before;
    }
  }

  
  &:before {
    content: '';
    position: absolute;
    width: $size/2;
    height: $size;
    border-radius: $size/2 0 0 $size/2;
    background: $chart-color;
    -moz-transform-origin: right center;
    -ms-transform-origin: right center;
    -o-transform-origin: right center;
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -moz-transform: rotate(#{$percentage * 360}deg);
    -ms-transform: rotate(#{$percentage * 360}deg);
    -webkit-transform: rotate(#{$percentage * 360}deg);
    -o-transform: rotate(#{$percentage * 360}deg);
    transform: rotate(#{$percentage * 360}deg);   
  }
  
    &.over-half:before {
      left: 0;
    } 
    &.under-half:before {
      left: -$size/2;      
    }

  &:after {
    content: '';
    position: absolute;
    width: $size/2;
    height: $size;
    text-align: center;
    line-height: $size;
  }

    &.under-half:after {
      left: -$size/2;
      background: $background-color;
      outline: 1px solid $background-color;
      box-shadow: none;
    }
    &.over-half:after {
      left: $size/2;
      text-indent: -$size/2;
      background: $chart-color;
      border-radius: 0 $size/2 $size/2 0;    
    }
  
}

// Chart
// 40/100 or 40%
.pie-timer {
  @include simple-pie-chart(8em, 70, 100, #ccc, #f2ecdb);
}



body {
  background: #f2ecdb;
}

SassMeister-output.css

.pie-timer {
  position: relative;
  width: 8em;
  height: 8em;
}
.pie-timer .deg-0, .pie-timer .deg-1, .pie-timer .deg-2, .pie-timer .deg-3, .pie-timer .deg-4, .pie-timer .deg-5, .pie-timer .deg-6, .pie-timer .deg-7, .pie-timer .deg-8, .pie-timer .deg-9, .pie-timer .deg-10, .pie-timer .deg-11, .pie-timer .deg-12, .pie-timer .deg-13, .pie-timer .deg-14, .pie-timer .deg-15, .pie-timer .deg-16, .pie-timer .deg-17, .pie-timer .deg-18, .pie-timer .deg-19, .pie-timer .deg-20, .pie-timer .deg-21, .pie-timer .deg-22, .pie-timer .deg-23, .pie-timer .deg-24, .pie-timer .deg-25, .pie-timer .deg-26, .pie-timer .deg-27, .pie-timer .deg-28, .pie-timer .deg-29, .pie-timer .deg-30, .pie-timer .deg-31, .pie-timer .deg-32, .pie-timer .deg-33, .pie-timer .deg-34, .pie-timer .deg-35, .pie-timer .deg-36, .pie-timer .deg-37, .pie-timer .deg-38, .pie-timer .deg-39, .pie-timer .deg-40, .pie-timer .deg-41, .pie-timer .deg-42, .pie-timer .deg-43, .pie-timer .deg-44, .pie-timer .deg-45, .pie-timer .deg-46, .pie-timer .deg-47, .pie-timer .deg-48, .pie-timer .deg-49, .pie-timer .deg-50, .pie-timer .deg-51, .pie-timer .deg-52, .pie-timer .deg-53, .pie-timer .deg-54, .pie-timer .deg-55, .pie-timer .deg-56, .pie-timer .deg-57, .pie-timer .deg-58, .pie-timer .deg-59, .pie-timer .deg-60, .pie-timer .deg-61, .pie-timer .deg-62, .pie-timer .deg-63, .pie-timer .deg-64, .pie-timer .deg-65, .pie-timer .deg-66, .pie-timer .deg-67, .pie-timer .deg-68, .pie-timer .deg-69, .pie-timer .deg-70, .pie-timer .deg-71, .pie-timer .deg-72, .pie-timer .deg-73, .pie-timer .deg-74, .pie-timer .deg-75, .pie-timer .deg-76, .pie-timer .deg-77, .pie-timer .deg-78, .pie-timer .deg-79, .pie-timer .deg-80, .pie-timer .deg-81, .pie-timer .deg-82, .pie-timer .deg-83, .pie-timer .deg-84, .pie-timer .deg-85, .pie-timer .deg-86, .pie-timer .deg-87, .pie-timer .deg-88, .pie-timer .deg-89, .pie-timer .deg-90, .pie-timer .deg-91, .pie-timer .deg-92, .pie-timer .deg-93, .pie-timer .deg-94, .pie-timer .deg-95, .pie-timer .deg-96, .pie-timer .deg-97, .pie-timer .deg-98, .pie-timer .deg-99, .pie-timer .deg-100, .pie-timer .deg-101, .pie-timer .deg-102, .pie-timer .deg-103, .pie-timer .deg-104, .pie-timer .deg-105, .pie-timer .deg-106, .pie-timer .deg-107, .pie-timer .deg-108, .pie-timer .deg-109, .pie-timer .deg-110, .pie-timer .deg-111, .pie-timer .deg-112, .pie-timer .deg-113, .pie-timer .deg-114, .pie-timer .deg-115, .pie-timer .deg-116, .pie-timer .deg-117, .pie-timer .deg-118, .pie-timer .deg-119, .pie-timer .deg-120, .pie-timer .deg-121, .pie-timer .deg-122, .pie-timer .deg-123, .pie-timer .deg-124, .pie-timer .deg-125, .pie-timer .deg-126, .pie-timer .deg-127, .pie-timer .deg-128, .pie-timer .deg-129, .pie-timer .deg-130, .pie-timer .deg-131, .pie-timer .deg-132, .pie-timer .deg-133, .pie-timer .deg-134, .pie-timer .deg-135, .pie-timer .deg-136, .pie-timer .deg-137, .pie-timer .deg-138, .pie-timer .deg-139, .pie-timer .deg-140, .pie-timer .deg-141, .pie-timer .deg-142, .pie-timer .deg-143, .pie-timer .deg-144, .pie-timer .deg-145, .pie-timer .deg-146, .pie-timer .deg-147, .pie-timer .deg-148, .pie-timer .deg-149, .pie-timer .deg-150, .pie-timer .deg-151, .pie-timer .deg-152, .pie-timer .deg-153, .pie-timer .deg-154, .pie-timer .deg-155, .pie-timer .deg-156, .pie-timer .deg-157, .pie-timer .deg-158, .pie-timer .deg-159, .pie-timer .deg-160, .pie-timer .deg-161, .pie-timer .deg-162, .pie-timer .deg-163, .pie-timer .deg-164, .pie-timer .deg-165, .pie-timer .deg-166, .pie-timer .deg-167, .pie-timer .deg-168, .pie-timer .deg-169, .pie-timer .deg-170, .pie-timer .deg-171, .pie-timer .deg-172, .pie-timer .deg-173, .pie-timer .deg-174, .pie-timer .deg-175, .pie-timer .deg-176, .pie-timer .deg-177, .pie-timer .deg-178, .pie-timer .deg-179 {
  left: 4em;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
.pie-timer .pie-timer {
  left: 0;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-timer:before {
  content: '';
  position: absolute;
  width: 4em;
  height: 8em;
  border-radius: 4em 0 0 4em;
  background: #cccccc;
  -moz-transform-origin: right center;
  -ms-transform-origin: right center;
  -o-transform-origin: right center;
  -webkit-transform-origin: right center;
  transform-origin: right center;
  -moz-transform: rotate(252.0deg);
  -ms-transform: rotate(252.0deg);
  -webkit-transform: rotate(252.0deg);
  -o-transform: rotate(252.0deg);
  transform: rotate(252.0deg);
}
.pie-timer.over-half:before {
  left: 0;
}
.pie-timer.under-half:before {
  left: -4em;
}
.pie-timer:after {
  content: '';
  position: absolute;
  width: 4em;
  height: 8em;
  text-align: center;
  line-height: 8em;
}
.pie-timer.under-half:after {
  left: -4em;
  background: #f2ecdb;
  outline: 1px solid #f2ecdb;
  box-shadow: none;
}
.pie-timer.over-half:after {
  left: 4em;
  text-indent: -4em;
  background: #cccccc;
  border-radius: 0 4em 4em 0;
}

body {
  background: #f2ecdb;
}

SassMeister-rendered.html

<div class="pie-timer deg-0"></div>