微调器不旋转答案

【问题标题】：Spinner not spinning微调器不旋转
【发布时间】：2017-02-25 15:55:31
【问题描述】：

我有一个用于长时间运行的微调器，但我无法让它旋转。我已经阅读了与此相关的其他 SO 问题，但似乎没有一个能够让我的方案发挥作用。

我有以下 HTML

<div class="ms-BasicSpinner">
    <div class="ms-Spinner">
        <div class="ms-Spinner-circle ms-Spinner--large"></div>
        <div class="ms-Spinner-label">Creating...</div>
    </div>
</div>

和 CSS

.ms-Spinner > .ms-Spinner-circle.ms-Spinner--large {
  width: 28px;
  height: 28px;
}

.ms-Spinner > .ms-Spinner-circle {
  margin: auto;
  box-sizing: border-box;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  border: 1.5px solid #c7e0f4;
  border-top-color: #0078d7;
  -webkit-animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);
  animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);
}

.ms-Spinner > .ms-Spinner-label {
  color: #0078d7;
  margin-top: 10px;
  text-align: center;
}

.ms-BasicSpinner .ms-Spinner {
  display: inline-block;
  margin: 10px 0;
}

我还要关注 JSFiddle https://jsfiddle.net/20ufspze/

让微调器旋转我缺少什么？

非常感谢任何帮助

提前致谢

【问题讨论】：

标签： html css spinner

【解决方案1】：

您将三次贝塞尔函数应用于旋转以获得所需的效果。适配the bottom element here你可以旋转蓝色部分：

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

并通过将cubic-bezier 部分重写为：

  -webkit-animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);
  animation: ms-Spinner-spin 1.3s infinite cubic-bezier(.53, .21, .29, .67);

【讨论】：

【解决方案2】：

动画任何HTML 组件的最佳做法是在 CSS 中使用动画关键帧。

@keyframes anim {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}

...

.ms-Spinner > .ms-Spinner-circle {
  margin: auto;
  box-sizing: border-box;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  border: 1.5px solid #c7e0f4;
  border-top-color: #0078d7;
  animation: anim 1.3s infinite;

}

...

小提琴链接：https://jsfiddle.net/8Ly697ne/

【讨论】：