html程式碼：

<div id="loading">
  <div class="color1"></div>
  <div class="color1"></div>
  <div class="color1"></div>
  <div class="color1"></div>
  <div class="color1"></div>
  <div class="color2"></div>
  <div class="color2"
 
></div>
  <div class="color2"></div>
  <div class="color2"></div>
  <div class="color2"></div>
</div>

css程式碼：

body{
  background:#000;
}
.color1{
  background:#FDE515;
}
.color2{
  background:#00DEF2;
}
@-webkit-keyframes loadRotate{
  from{
    -webkit-transform
 
:rotateZ(0deg);
  }
  to{
    -webkit-transform:rotateZ(360deg);
  }
}
@keyframes loadRotate{
  from{
    transform:rotateZ(0deg);
  }
  to{
    transform:rotateZ(360deg);
  }
}
#loading{
  width:100px;
  height:100px;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-50px;
  margin-top:-50px;
  -webkit-animation
 
:loadRotate 3s linear infinite;
  -webkit-animation-fill-mode:both;
  animation:loadRotate 3s linear infinite;
  /*動畫從頭到尾的速度是相同的  liner*/
  /*指定動畫應該播放無限次（永遠）*/
  animation-fill-mode:both;
  /*動畫結束前和結束後都應用該屬性 animation-fill-mode:both; */
}
#loading div{
  width:20px;
  height:30px;
  position:absolute;
  left:40px;
  top:35px;
  -webkit-transform:rotateZ(0) translateX(60px);
  opacity:1;
  border-radius:50% 0;
}
#loading div:nth-child(2){
  -webkit-transform:rotateZ(36deg) translateX(60px);
  opacity:0.8;
}
#loading div:nth-child(3){
  -webkit-transform:rotateZ(72deg) translateX(60px);
  opacity:0.6;
}
#loading div:nth-child(4){
  -webkit-transform:rotateZ(108deg) translateX(60px);
  opacity: 0.4;
}
#loading div:nth-child(5){
  -webkit-transform:rotateZ(144deg) translateX(60px);
  opacity:0.2;
}
#loading div:nth-child(6){
  -webkit-transform:rotateZ(180deg) translateX(60px);
  opacity:1;
}
#loading div:nth-child(7){
  -webkit-transform:rotateZ(216deg) translateX(60px);
  opacity:0.8;
}
#loading div:nth-child(8){
  -webkit-transform:rotateZ(252deg) translateX(60px);
  opacity:0.6;
}
#loading div:nth-child(9){
  -webkit-transform:rotateZ(288deg) translateX(60px);
  opacity:0.4;
}
#loading div:nth-child(10){
  -webkit-transform:rotateZ(324deg) translateX(60px);
  opacity:0.2;
}