JSFiddle - React, Tailwind, and code Playground

by Mr_Vasu

HTML

<div class="radial-container">
    <div class="radial"></div>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottom-left"></div>
        <div class="bottom-right"></div>
    </div>
</div>

CSS

.container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.left, .right, .bottom-left, .bottom-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background-color: white;
}
.right {
    left: 50%;
}
.left {
    z-index: 2;
}
.right {
    z-index: 0;
}
.bottom-left, .bottom-right {
    width: 100%;
    left: 0;
    border-radius: 50%;
    z-index: -1;
    transform: rotate(0deg);
}
.bottom-left {
    background: linear-gradient(90deg, tomato 50%, transparent 50%);
    transition: transform 0s linear;
}
.bottom-right {
    background: linear-gradient(90deg, transparent 50%, tomato 50%);
    transition: transform 0s 0s linear, z-index 0s 0s linear;
}
.radial:hover + .container .animate.bottom-left {
    z-index: 1;
    transition: transform 1s linear;
}
.radial:hover + .container .animate.bottom-right {
    z-index: 3;
    transition: transform 1s 1s linear, z-index 0s 1s linear;
}
.radial {
    border-radius: 50%;
    border: 10px solid transparent;
    background-color: skyblue;
    cursor: pointer;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    position: absolute;
    z-index: 5;
}
.radial-container {
    width: 100px;
    height: 100px;
    position: relative;
}

JavaScript

function progress(value, elem) {
    function transform(v) {
        return {
            'transform': 'rotate(' + v + 'deg)'
        }
    }
    if (!value || value > 100) value = 0;
    var enter = 'mouseenter',
        leave = 'mouseleave',
        $el = $(elem),
        $radial = $(elem).find('.radial'),
        $bLeft = $(elem).find('.bottom-left'),
        $bRight = $(elem).find('.bottom-right'),
        className = 'animate';
    $radial.off(enter).on(enter, function () {
        var deg = (360 * value / 100);
        if (deg <= 180) {
            $bLeft.css(transform(deg)).addClass(className);
            $bRight.removeClass(className);
        } else {
            $bLeft.css(transform(180)).addClass(className);
            $bRight.css(transform((deg - 180))).addClass(className);
        }
    }).off(leave).on(leave, function () {
        $(elem).find('.bottom-left').css(transform(0)).removeClass(className);
        $(elem).find('.bottom-right').css(transform(0)).removeClass(className);
    });

}

progress(40, '.radial-container');