@keyframes spin {
  from {
    offset-distance: 0%;
    transform: rotate(0deg);
  }
  to {
    offset-distance: 100%;
    transform: rotate(-360deg);
  }
}

@property --color {
  syntax: '<color>';
  initial-value: #fff;
  inherits: true;
}

:root {
  --color: #fff;
  margin: 0;
  height: 100vh;
  transition: --color 1s;
  
  &:hover {
    --color: #1fb;
  }
}

:root::before {
  content: "";
  width: 30vmin;
  height: 30vmin;
  position: absolute;
  offset-path: circle(5vmin at center);
  animation: spin 2s linear infinite;
  transform: rotate(0deg);
  border: 1vmin solid blue;
}

:root::after {
  content: "";
  width: 50vmin;
  height: 50vmin;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  background:
    conic-gradient(#0000 75%, var(--color) 0) 0 0 / 66.66% 66.66%;
}