Simple CSS spinner element wobbles while rotating

Question

I've been trying to create a simple css spinner which is shown while my page is loading by using a pseudo element overlaying a div where content will be shown. It uses border-radius and transform: rotate() to achieve this effect but as you can see it wobbles strangely while rotating. The effect is more or less obvious depending on the screen size, zoom level and browser. I find it's most visible in MS Edge.

Example fiddle

.loading {
  width: 75vh;
  height: 100vh;
  margin: auto;
  background: white;
  position: relative;
}

.loading::after {
    border: 6vmin solid lightblue;
    border-top: 6vmin solid darkblue;
    position: absolute;
    margin-top: 5vmin;
    margin-left: 5vmin;
    width: 15vmin;
    height: 15vmin;
    content: "";
    border-radius: 50%;
    animation: spin .5s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

<div class="loading"></div>

Answer 1

There's some weird cut going on with the border-radius Change it to border-radius: 1000px and see what happens

Answer 2

This issue was driving me crazy all day. I was able to solve it personally by making the ring thicker than desired and then masking over its inner and outer portions to hide the wobble from the viewer.

Solution. https://codepen.io/corbinmosher/pen/GRWmYjy

Solution with background coloring to help with understanding it. https://codepen.io/corbinmosher/pen/bGqWmEj

<div class="spinner__container">
  <div class="spinner__ring"></div>
  <div class="spinner__outline"></div>
</div>

.spinner__container {
  position: relative;
  width: 58px;
  height: 58px;
  
  background-color: white;
}

.spinner__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 50%;
}

.spinner__ring:before {
  position: absolute;
  top: -1px;
  left: -1px;

  width: calc(100% + 2px);
  height: calc(100% + 2px);

  border: 10px solid lightblue;
  border-top: 10px solid blue;
  box-sizing: border-box;
  content: '';
  border-radius: 50%;
  animation: rotate-spinner 1s linear infinite;
}

.spinner__ring:after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: calc(100% - 8px);
  height: calc(100% - 8px);

  box-sizing: border-box;
  content: '';
  border-radius: 50%;

  background-color: white;
}

.spinner__outline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 50%;
  border: solid 2px white;
}

@keyframes rotate-spinner {
  0% {
    transform: rotate(405deg);
  }
  100% {
    transform: rotate(765deg);
  }
}

@-webkit-keyframes rotate-spinner {
  0% {
    transform: rotate(405deg);
  }
  100% {
    transform: rotate(765deg);
  }
}