Doughnut (need improvement)

doughnut.html

<div class="Doughnut js-doughnut" data-percent="55">
    <div class="Doughnut-slice">
        <span class="Doughnut-pie"></span>
    </div>
</div>

doughnut.js

(function ($) {

    'use strict';

    var Doughnut = function (element) {
        this.doughnut = element;
        this._slice = $('.Doughnut-slice', this.doughnut);
        this.pie = $('.Doughnut-pie', this.doughnut);
        this.value = this.doughnut.data('percent');
        this.init();
    };

    Doughnut.prototype = {
        init: function () {
            if (this.value > 50) {
                this._slice.addClass('is-gt50');
                this._slice.append('<span class="Doughnut-pie is-filled"></span>');
            }
            var deg = Math.ceil(360 * (this.value / 100));
            this.rotate(deg);
            this.doughnut.addClass('js-doughnut--ready');
        },
        rotate: function (deg) {
            this.pie.css({
                '-webkit-transform': 'rotate(' + deg + 'deg)',
                '-ms-transform': 'rotate(' + deg + 'deg)',
                'transform': 'rotate(' + deg + 'deg)'
            });
        }
    };
    
    $('.js-doughnut:not(.js-doughnut--ready)').each(function () {
        new Doughnut($(this));
    });

})(jQuery);

doughnut.scss

.Doughnut {
    background: #eb0042;
    border-radius: 100%;
    display: inline-block;
    height: 60px;
    position: relative;
    width: 60px;

    &::after {
        content: '';
        background: $color-torch-red;
        border-radius: 50%;
        display: block;
        height: 48px;
        position: absolute;
        left: 6px;
        top: 6px;
        width: 48px;
        z-index: 1
    }

    &::before {
        background: #eb0042;
        border-radius: 50%;
        content: '';
        display: block;
        height: 60px;
        position: absolute;
        width: 60px;
        z-index: 0;
    }
}

.Doughnut-slice {
    clip: rect(0px, 60px, 60px, 30px);
    position: absolute;
    height: 60px;
    width: 60px;

    &.is-gt50 {
        clip: rect(auto, auto, auto, auto);
    }
}

.Doughnut-pie {
    border: 6px solid #fff;
    border-radius: 50%;
    clip: rect(0px, 30px, 60px, 0px);
    height: 48px;
    position: absolute;
    // transition: all 1s;
    width: 48px;

    &.is-filled {
        transform: rotate(180deg) !important;
    }
}