CSS加载微调器不旋转

Question

我正在尝试重新创建此微调器 here，但我似乎无法弄清楚它为什么不旋转。我对反应不好，所以我认为这可以通过纯 css 来实现。我已经把它的样式正确地设置了，但旋转没有运气。

<div class="Loading__StyledLoading bWDkpr">
  <svg viewBox="0 0 40 40" class="Loading__StyledSpinner dCPhrt">
    <circle cx="50%" cy="50%" r="18" type="pageLoader" class="Loading__StyledSpinnerCircle hsiYVK"></circle>
  </svg>
  <div type="pageLoader" class="Loading__StyledLoadingText dpesEv"></div>
</div>

css

.bWDkpr {
  height: 120px;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  overflow-x: hidden;
  overflow-y: hidden;
  box-sizing: border-box;
}

.dCPhrt {
  width: 40px;
  height: 40px;
  animation-duration: 0.75s;
  animation-timing-function: linear;
  animation-delay: initial;
  animation-iteration-count: infinite;
  animation-direction: initial;
  animation-fill-mode: initial;
  animation-play-state: initial;
  animation-name: cZxgpV;
}

.hsiYVK {
  fill: transparent;
  stroke: rgb(186, 199, 213);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-dasharray: 128px;
  stroke-dashoffset: 64px;
}

感谢任何帮助。谢谢！

Answer 1

您可以为transform 属性设置动画：

.bWDkpr {
  height: 120px;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  overflow-x: hidden;
  overflow-y: hidden;
  box-sizing: border-box;
}

.dCPhrt {
  width: 40px;
  height: 40px;
  animation-duration: 0.75s;
  animation-timing-function: linear;
  animation-delay: initial;
  animation-iteration-count: infinite;
  animation-direction: initial;
  animation-fill-mode: initial;
  animation-play-state: initial;
  animation-name: cZxgpV;
}

.hsiYVK {
  fill: transparent;
  stroke: rgb(186, 199, 213);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-dasharray: 128px;
  stroke-dashoffset: 64px;
}

@keyframes cZxgpV {
  from {
    transform: rotate(360deg);
  }
}

<div class="Loading__StyledLoading bWDkpr">
  <svg viewBox="0 0 40 40" class="Loading__StyledSpinner dCPhrt">
    <circle cx="50%" cy="50%" r="18" type="pageLoader" class="Loading__StyledSpinnerCircle hsiYVK"></circle>
  </svg>
  <div type="pageLoader" class="Loading__StyledLoadingText dpesEv"></div>
</div>