JSFiddle - React, Tailwind, and code Playground

by Yasin Yoruk

HTML

<div id="circleBar" class="progress-26">
        <div class="circleBar_inside">
        	<span class="orbit"></span>
        </div>
    </div>

CSS

body {
	background-color: #262626;
}
#circleBar {
    left: 44%;
    position: absolute;
    display: inline-block;
    margin: 1rem;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #262626;
    z-index: 1;
    top: 60%;
}
#circleBar:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-animation: colorload 2s;
}

.circleBar_inside {
    background: url("./loading_progress.svg") no-repeat top center;
    margin: 3px;
    position: absolute;
    width: 114px;
    height: 114px;
    z-index: 2;
}

.circleBar_inside span.orbit {
    position: absolute;
    width: 114px;
    height: 114px;
    z-index: 3;
    background: url("./loading_progress.gif") no-repeat top left;
}

#circleBar.progress-0:after {
    background-image: linear-gradient(90deg, #262626 50%, transparent 50%, transparent), linear-gradient(90deg, #dbdbdb 50%, #262626 50%, #262626);
}

#circleBar.progress-1:after {
    background-image: linear-gradient(90deg, #262626 50%, transparent 50%, transparent), linear-gradient(93.6deg, #dbdbdb 50%, #262626 50%, #262626);
}

#circleBar.progress-2:after {
    background-image: linear-gradient(90deg, #262626 50%, transparent 50%, transparent), linear-gradient(97.2deg, #dbdbdb 50%, #262626 50%, #262626);
}

#circleBar.progress-3:after {
    background-image: linear-gradient(90deg, #262626 50%, transparent 50%, transparent), linear-gradient(100.8deg, #dbdbdb 50%, #262626 50%, #262626);
}

#circleBar.progress-4:after {
    background-image: linear-gradient(90deg, #262626 50%, transparent 50%, transparent), linear-gradient(104.4deg, #dbdbdb 50%, #262626 50%, #262626);
}

#circleBar.progress-5:after {
    background-image: linear-gradient(90deg, #262626 50%, transparent 50%, transparent), linear-gradient(108deg, #dbdbdb 50%, #262626 50%, #262626);
}

#circleBar.progress-6:after {
    background-image: linear-gradient(90deg, #262626 50%, transparent 50%, transparent),...