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

CSS动画命令运行正常，但是您看不到它。
您需要一个图像，因为您没有使用<svg>和<circle>，因为它们在您所附加的示例中使用。

请注意，.spinner类的宽度和高度应为微调器图像的宽度和高度。

根据您的代码： LIVE DEMO

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!--remove comment to use jquery-->
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
    <style>
      .spinner {
        vertical-align: middle;
        width: 128px;
        height: 128px;
        display: inline-block;
        margin-right: 5px;
        border-radius: 2em;
        -webkit-box-sizing: border-box;
        border-top-color: #fff;
        -webkit-animation: spin 1s infinite linear;
        animation: spin 1s infinite linear;
      }
      .spinner--wholePageWithVeil{
        display: block;
        border-radius: 8em;
        width: 8em;
        height: 8em;
        display: inline-block;
        animation: dash 2.0s ease-in-out infinite;
      }
      @-webkit-keyframes spin {
        100% {
          -webkit-transform: rotate(360deg);
        }
      }
      @keyframes spin {
        100% {
          -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);
        }
      }
    </style>
  </head>
  <body>
    <span class="spinner" [class.spinner--wholePageWithVeil]="wholePageWithVeil"> 
      <img src="http://www.pbrennan.net/wp-content/uploads/2014/03/ic_progress.png" alt="">
    </span>
  </body>
</html>

Answer 2

这很容易。

您需要修改一些CSS，将stroke: #fff;放入spinner类中。

请检查，并让我知道进一步的澄清。

希望获得帮助。

html, body {
  height: 100%;
  background-image: linear-gradient(-105deg, #009acc, #363795);
}

.spinner {
  animation: rotate 2s linear infinite;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  width: 50px;
  height: 50px;
      stroke: #fff;
  }
  .path {
    stroke: hsl(210, 70, 75);
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

<svg class="spinner" viewBox="0 0 50 50">
  <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</svg>

是的，您也可以使用纯CSS来创建。

希望获得帮助。

.lds-ring {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ring span {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #000 transparent transparent transparent;
}
.lds-ring span:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring span:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring span:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="lds-ring">
<span></span>
<span></span>
<span></span>
<span></span>
</div>

是的，您需要更改动画CSS，例如：animation: lds-ring 1.2s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite;

希望获得帮助。

span {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 51px;
    height: 51px;
    margin: 6px;
    border: 6px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite;
    border-color: #000 #000 #000 transparent;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<span></span>

Answer 3

不确定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>

具有Span元素的Loader / Spinner CSS

3 个答案: