<div></div>
$size: 400px;
div {
height: $size;
width: $size;
}
div {
box-sizing: border-box;
margin: 0 auto;
display: grid;
position: relative;
place-items: center;
background-image: conic-gradient(
green 0% 60%,
hsl(120deg, 100%, 50%) 60% 75%,
hsl(180deg, 100%, 50%) 75% 100%
);
border-radius: 50%;
transition: all 500ms ease;
background-repeat: no-repeat;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.