12种黑白色loading动画特效

这是一款黑白色的loading动画特效。该loading特效共12种不同的效果，每一种效果都由简单的css代码制作出黑白色的loading特效，非常炫酷。

使用方法

HTML代码

下面是其中的 Progresser loading效果的代码：

<div class="funspinner__box">
    <b>Progresser</b>
    <div class="progresser">
        <div class="progresser__bar">
            <div class="progresser__bar-item"></div>
        </div>
    </div>
</div>
		

CSS代码

div.progresser {
  width: 6rem;
  height: auto;
}
div.progresser__bar {
  width: 6rem;
  height: 0.7rem;
  border-radius: 1rem;
  overflow: hidden;
  background-color: #ffffff;
}
div.progresser__bar-item {
  width: 3rem;
  height: 0.7rem;
  margin: 0 0 0 -2rem;
  border-radius: 1rem;
  background-color: #000000;
  animation: progresser 1.5s infinite cubic-bezier(0.76, 0, 0.24, 1);
}

@keyframes progresser {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(7rem);
  }
  100% {
    transform: translateX(0);
  }
}
		

codepen网址：https://codepen.io/esdesignstudio/pen/RwQdEZb