.m-spinner--swirl {
  --spinner-color: var(--color,#1F6BAE);
  --spinner-color-secondary: var(--color-secondary,#17288B);
  --spinner-duration: 2s;
  --spinner-size: 100px;
  display: inline-flex;
  font-size: var(--spinner-size);
  color: var(--spinner-color);
  width: 1em;
  height: 1em;
  max-width: 1em;
  max-height: 1em;
  position: relative;
  animation-duration: var(--spinner-duration)
}

.m-spinner--swirl:before{
    top:.05em;
    right:.05em;
    bottom:.05em;
    left:.05em;
    animation-duration:3s
}

.m-spinner--swirl:after{
    top:.135em;
    right:.135em;
    bottom:.135em;
    left:.135em;
    animation-duration:1.5s
}

.m-spinner--swirl,.m-spinner--swirl:after,.m-spinner--swirl:before{
    border:.0333em solid transparent;
    border-radius:50%;
    border-top-color:currentColor;
    animation-name:m-spinner-swirl;
    animation-iteration-count:infinite;
    animation-timing-function:linear
}

.m-spinner--swirl:after,.m-spinner--swirl:before{
    content:"";position:absolute
}

@keyframes m-spinner-swirl{
    0%{transform:rotate(0deg)}50%{color:var(--spinner-color-secondary)}to{transform:rotate(1turn)}
}