JSFiddle - React, Tailwind, and code Playground

by Jon Eyrick

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div class="pie">
    <div class="clip1">
        <div class="slice1"></div>
    </div>
    <div class="clip2">
        <div class="slice2"></div>
    </div>
    <div class="status-outer">
        <div class="status"></div>
    </div>
</div>

CSS

:root {
    margin:0;
    padding:0;
}
body{background:#666;color:#888}
sup{font:bold 25% sans-serif;position:relative;top:-0.75em}
.pie {
    background-color:#888;
    width:200px;
    height:200px;
    border-radius:50%;
    position:relative;
}
.clip1 {
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:200px;
    clip:rect(0px, 200px, 200px, 100px);
}
.slice1 {
    position:absolute;
    width:200px;
    height:200px;
    clip:rect(0px, 100px, 200px, 0px);
    border-radius:50%;
    background-color:#85ff00;
    border-color:#85ff00;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}
.clip2 {
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:200px;
    clip:rect(0, 100px, 200px, 0px);
}
.slice2 {
    position:absolute;
    width:200px;
    height:200px;
    clip:rect(0px, 200px, 200px, 100px);
    border-radius:50%;
    background-color:#85ff00;
    border-color:#85ff00;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}
.status-outer {
    display:inline;
    background:#666;
    border-radius:50%;
    width:150px;
    height:150px;
    position:absolute;
    top:25px;
    left:25px;
    transition:transform 0.2s ease-out,color 0.2s ease-out;
} .status-outer:hover {
transform:scale(1.07);
color:#85ff00;
cursor:pointer;
}
.status {
    position:absolute;
    height:200px;
    width:200px;
    margin-top:-35px;
    margin-left:-25px;
    line-height:60px;
    text-align:center;
    top:50%;
    font-size:350%;
}

JavaScript

$(document).ready(function () {
    progressBarUpdate(5, 9);
});

function rotate(element, degree) {
    element.css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
            '-moz-transform': 'rotate(' + degree + 'deg)',
            '-ms-transform': 'rotate(' + degree + 'deg)',
            '-o-transform': 'rotate(' + degree + 'deg)',
            'transform': 'rotate(' + degree + 'deg)',
            'zoom': 1
    });
}

function progressBarUpdate(x, outOf) {
    var firstHalfAngle = 180;
    var secondHalfAngle = 0;

    // caluclate the angle
    var drawAngle = x / outOf * 360;

    // calculate the angle to be displayed if each half
    if (drawAngle <= 180) {
        firstHalfAngle = drawAngle;
    } else {
        secondHalfAngle = drawAngle - 180;
    }

    // set the transition
    rotate($(".slice1"), firstHalfAngle);
    rotate($(".slice2"), secondHalfAngle);

    // set the values on the text
    $(".status").html("<sup>$</sup>"+outOf);
}