css spinner keyframe animation wobbly in IE

I've seen several people having problems with "wobbly" spinner animations in IE and most of the time, using an image instead of animating the border is proposed, but that won't work for me since the img takes too long to load in IE and won't be displayed in time. (Website already starts reloading and no spinner will be shown at all.) Therefore, I wanted to ask if anyone has another idea on fixing the code used in my company (less):

@keyframes spinAround {
  from {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.is-loading {
  display: inline;
  position: absolute;
  top: 50%;
  box-sizing: inherit;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, .8);
    box-sizing: inherit;
  }

  &::after {
    height: 12px;
    width: 12px;
    margin-left: -10px;
    margin-top: -10px;
    border-width: 4px;
    border-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, .4) rgba(255, 255, 255, .4) rgba(255, 255, 255, .4);
    top: 50%;
    content: "";
    display: block;
    position: absolute;
    border-style: solid;
    border-radius: 50%;
    animation: spinAround 700ms infinite linear;
    box-sizing: inherit;

  }
}

I then simply toggle the class on a div. Works perfect in Chrome or FF, but probably due to the IE border-radius problem is jumpy/bumpy in IE.

Thanks ahead for any ideas :)