css - 带有 Span 元素的加载器/微调器 CSS

Question

我有一个 span 元素，不能使用另一个。通过这个 span 元素，我必须实现微调器/加载器功能，我希望行为如下所示 - https://codepen.io/supah/pen/BjYLdW

以下是我的代码，它没有按预期工作:

  <span class="spinner"></span>


  .spinner{
    display: block;
    border-radius: 8em;
    width: 8em;
    height: 8em;
    display: inline-block;
    animation: dash 2.0s ease-in-out infinite;
  }

 @keyframes dash {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
  }

谁能帮我解决我的不足？

Answer 1

不确定您使用 spinner--wholePageWithVeil 做了什么。但是，没必要。你缺少的一点是给边框一个宽度和样式。

body {
  background-color: #008;
}

.spinner {
  animation: spin 1s infinite ease-in-out; 
//  animation: dash 2s infinite ease-in-out; 
  border-radius: 50%;
  border-top: 2px solid #fff;
  display: inline-block;
  height: 2em;
  margin: calc(50vh - 1em) calc(50vw - 1em);
  width: 2em;
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    transform: rotate(360deg); 
  }
}

@keyframes dash {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<span class="spinner"></span>