JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="Orbicular" id="containter">
    <orbicular total="80" progression="70">
        Some content for the circle
    </orbicular>
</div>

SCSS

// Don't rely on Compass
@mixin co-border-radius($radius) {
    border-radius:$radius;
    -webkit-border-radius:$radius;
    -moz-border-radius:$radius;
}

@mixin co-transform($transform) {
    -webkit-transform: $transform;
    -moz-transform: $transform;
    -ms-transform: $transform;
    transform: $transform;
}

@mixin co-box-sizing($type) {
    -webkit-box-sizing: $type;
    -moz-box-sizing: $type;
    box-sizing: $type;
}

// Use this mixin to add orbicular support to your css
@mixin orbicular(
    $barColor:  #50a6d3,    // The completed progress
    $barBg:     #EEE,       // The remaining progress
    $barWidth:  8,          // The bar width is defined as a percentage of the width of the circle
    $contentBg: #2b383f,    // The circle center
    $fontSize:  8,          // Content font-size as a percentage of the circle size
    $fontColor: #FFF,
    $transTime: 0.3s,
    $transFunc: linear,
    $shadow: ''
    ) {

    // This is the width of the progress bar itself.
    // NOT the size of the circle which is definded by it's parent element.
    //
    // The bar width is defined as a percentage of the width of the circle
    // (% of parent element width).
    $calculatedWidth: $barWidth / 100;
    $contentWidth: (1 - (2 * $calculatedWidth));

    $actualBarWidth: $calculatedWidth + em;
    $actualFontSize: $fontSize / 100 + em;

    // this is the core progress class
    div.co-circle-progress {
        position: relative;
        width: 100%;
        height: 1em;
        @include co-box-sizing(border-box);

        *, *:after, *:before {
            @include co-box-sizing(border-box);
        }

        // Provides the bars background
        background-color: $barBg;
        @include co-border-radius(0.5em);

        // Common traits of all the circles
        &> div.co-circle, div.co-fill {
            position:absolute;
            top: 0;
            left: 0;
            width: 1em;
            height: 1em;
            background: transparent;

...

JavaScript

/**
*    CoTag Orbicular
*    A more or less pure CSS, circular, progress bar
*    
*   Copyright (c) 2014 CoTag Media.
*    
*    @author     Stephen von Takach <[email protected]>
*    @copyright  2014 cotag.me
* 
*     
*     References:
*        * http://fromanegg.com/post/41302147556/100-pure-css-radial-progress-bar
*        * https://medium.com/@andsens/radial-progress-indicator-using-css-a917b80c43f9
*
**/


(function (angular) {
    'use strict';

    angular.module('Orbicular', []).

        // isolated circular progress bar
        directive('orbicular', ['$window', function (windowRef) {

            // Constants here reduce memory requirements of each circle
            var $window = angular.element(windowRef),

                // Cache event strings
                resizeEvents = 'orientationchange resize',

                // Set the rotation of the square
                updateProgress = function (circles, fix, pos) {
                    circles.css({
                        '-webkit-transform': 'rotate(' + pos + 'deg)',
                        '-moz-transform': 'rotate(' + pos + 'deg)',
                        '-ms-transform': 'rotate(' + pos + 'deg)',
                        '-o-transform': 'rotate(' + pos + 'deg)',
                        'transform': 'rotate(' + pos + 'deg)'
                    });
                    pos = pos * 2;
                    fix.css({
                        '-webkit-transform': 'rotate(' + pos + 'deg)',
                        '-moz-transform': 'rotate(' + pos + 'deg)',
                        '-ms-transform': 'rotate(' + pos + 'deg)',
                        '-o-transform': 'rotate(' + pos + 'deg)',
                        'transform': 'rotate(' + pos + 'deg)'
                    });
                };

            return {
                template: '<div class="co-circle-progress">' +
                            '<div class="co-circle co-full">' +
                                '<div class="co-fill"></div>' +
      ...