Transparent Pure CSS3 Donut Chart

by Vladimir Sobolev

HTML

<div>40%<b></b></div>

SCSS

$a: 40; // 40% (0-100%)
$size: 300px;
$width: 30px;

$a: $a * 360 / 100;
$c1: #fa0; // chart color
$c2: #0af; // active color
$t: transparent;
$s: floor($a/90);

body {
    background: #444;
}

div {
    width: $size;
    height: $size;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font: normal 64px Optima;
    text-align: center;
    &:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        font-size: 0;
    }
    &:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1;
        border: $width solid $c1;
        border-radius: 50%;
        box-sizing: border-box;
    }
    b {
        &:after,
        &:before {
            content: '';
            position: absolute;
            z-index: 2;
            overflow: hidden;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border: $width solid;
            border-radius: 50%;
            border-color: $t;
            @if ($s >=0) {
                border-top-color: $c2;
            }
            @if ($s > 1) {
                border-right-color: $c2;
            }
            @if ($s > 2) {
                border-bottom-color: $c2;
            }
            @if ($s > 3) {
                border-left-color: $c2;
            }
            box-sizing: border-box;
            transform: rotate(45deg);
            @if ($a < 90) {
                transform: rotate(#{$a - 45}deg);
            }
        }
        &::after {
            transform: rotate(#{$a%90 + 45}deg);
            @if ($s==0) {
                content: none;
            }
            z-index: 3;
        }
        @if ($a < 90) {
            position: absolute;
            left: 50%;
            top: 0;
            width: 50%;
            height: 50%;
            overflow:...