.loader {
  display: none;
  height: 16px;
}

.loader > span {
  animation-duration: 0.69s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: rotate;
  animation-timing-function: linear;
  width: 1rem;
  height: 1rem;
  display: inline-block;
}

.loader svg {
  fill: #0000;
}

.loader circle {
  stroke-width: 16;
  stroke-dasharray: 276.4608 276.4608;
  stroke-linecap: butt;
}

.loader circle.bg {
  stroke: #e0e0e0;
  stroke-dashoffset: -22;
}

.loader circle.stroke {
  stroke-dashoffset: 143.759616;
  stroke: var(--sl-color-primary-600);
}

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