CSS加载器旋转器：在甜甜圈的部分之间添加白色分隔符

Question

我想在蓝色和黑色之间添加一些白色的分隔符，请参见下面的GIF动画。请在jsbin中编辑我的CSS，以模仿图像中的相同动画效果。我只需要CSS版本的此动画，不需要SVG或JS。

.spinner {
   height:60px;
   width:60px;
   animation: rotation 10s infinite linear;
   border-left:7px solid rgba(0,0,0,1);
   border-right:7px solid rgba(0,0,0,1);
   border-bottom:7px solid rgba(0,174,239,1);
   border-top:7px solid rgba(0,174,239,1);
   border-radius: 100%;
}

@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}

http://jsbin.com/ziniwexuwi/edit?html,css,output

- Nizzy

---

您可以参考此链接 https://codepen.io/kravisingh/pen/xqaObG - kravisingh

@Nizzy刚刚回答了你的问题。如果这对你有用，请告诉我。 - Anmol Sandal

Answer 1

请检查更新后的代码。希望它能对您有用。

.spinner {
   height:62px;
   width:62px;
   border-left:7px solid rgba(0,0,0,1);
   border-right:7px solid rgba(0,0,0,1);
   border-bottom:7px solid rgba(0,174,239,1);
   border-top:7px solid rgba(0,174,239,1);
   border-radius: 100%;
   border-spacing: 1px;
   position: relative;
   animation: rotation 1s infinite linear;
}

.spinner span {
  height: 7px;
  width: 2px;
  background: #fff;
  position: absolute;
  z-index: 1;
}

.spinner .a {
  left: 6px;
  top:3px;
  transform: rotate(-47deg);
}

.spinner .b {
  right: 6px;
  top:3px;
  transform: rotate(47deg);
}

.spinner .c {
  left: 6px;
  bottom: 3px;
  transform: rotate(47deg);
}

.spinner .d {
  right: 6px;
  bottom: 3px;
  transform: rotate(-47deg);
}

@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}

<div class="spinner">
<span class="a"></span>
<span class="b"></span>
<span class="c"></span>
<span class="d"></span>
</div>

- Anmol Sandal

Answer 2

检查这个以满足您的完美需求：

.loaderborder {
  position: relative;
  display: inline-block;
  border: 16px solid #87ceeb;
  border-radius: 50%;
  border-top: 16px solid #000;
  border-right: 16px solid #87ceeb;
  border-bottom: 16px solid #000;
  width: 100px;
  height: 100px;
  -webkit-animation: loaderborder 2.5s linear infinite;
  animation: loaderborder 2.5s linear infinite;
}
.loaderborder:before{
  content: '';
    border-left: 16px solid #fff;    
    width: 0;
    height: 9px;
    border-radius: 0%;
    display: inline-block;
    transform: rotate(50deg);
}
.loaderborder:after{
  content: '';
    border-right: 16px solid #fff;
    width: 0;
    height: 9px;
    border-radius: 0;
    display: inline-block;
    transform: rotate(-52deg);
    position: absolute;
    right: 0;
    top: 5px;
}
.loaderborder span{
  display: inline-block;
}
.loaderborder span:before{
  content: '';
    border-top: 16px solid #fff;
    width: 10px;
    height: 9px;
    border-radius: 0%;
    display: inline-block;
    transform: rotate(50deg);
    position: absolute;
    z-index: 999;
    top: 78px;
    left: -2px;
}
.loaderborder span:after{
  content: '';
    border-bottom: 16px solid #fff;
    width: 9px;
    height: 9px;
    border-radius: 0;
    display: inline-block;
    transform: rotate(-52deg);
    position: absolute;
    z-index: 9999;
    top: 73px;
    left: 85px;
}
@-webkit-keyframes loaderborder {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

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

<div class="loaderborder"><span></span></div>

您还可以检查此Fiddle。

- kravisingh