<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
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.