HTML
<div class='container color-wheel'>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
<div class='slice'></div>
</div>
SCSS
$wheelBaseColor: #3cff85;
$pulseSpinBaseColor: #DBE08F;
$translateX: -50%;
$translateY: -50%;
$numSlices: 25;
$divider: 360 / $numSlices;
$pulseDivider: $divider * 10;
* {
box-sizing: border-box;
}
html, body {
background-color: #333;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
width: 200px;
height: 200px;
}
.color-wheel .slice {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
border: 200px solid transparent;
border-left-width: 108px;
border-right-width: 108px;
border-top-color: $wheelBaseColor;
transform: translate($translateX, $translateY);
@for $i from 1 through $numSlices {
&:nth-child(#{$i}) {
border-top-color: adjust-hue($wheelBaseColor, ($i - 1) * 35deg);
transform: translate($translateX, $translateY) rotate(#{($i - 1) * $divider}deg) scale(0);
animation-timing-function: linear;
animation: colorWheelLoad-#{$i} 1.85s #{$i * 0.07}s infinite;
}
}
}
@for $i from 1 through $numSlices {
@keyframes colorWheelLoad-#{$i} {
0% {
opacity: 0;
transform: translate($translateX, $translateY) rotate(#{($i - 1) * $divider}deg) scale(0);
}
25%,
75% {
opacity: 1;
transform: translate($translateX, $translateY) rotate(#{($i - 1) * $divider}deg) scale(1);
}
100% {
opacity: 0;
transform: translate($translateX, $translateY) rotate(#{($i - 1) * $divider}deg) scale(0);
}
}
}
