paper preloader

index.html

<div class="container">
  <div class="paper"></div>
  <div class="paper"></div>
  <div class="paper"></div>
  <div class="paper"></div>
  <div class="paper"></div>
  <div class="paper"></div>
  <div class="paper"></div>
  <div class="paper"></div>
  <div class="paper"></div>
  <div class="paper"></div>
  <div class="paper"></div>
  <div class="paper"></div>
</div>

paper-preloader.markdown

paper preloader

sample some cool paper loader

A Pen by bona on CodePen.

License.

style.scss

.container{
  position:relative;
  margin:100px auto;
  width:20px;
  height:20px;
  perspective:160px;
  transform-style:preserve-3d;
}
.container .paper{
  width:35px;
  height:45px;
  background:#fff;
  border:5px solid blueviolet;
  position:absolute;
  border-left:none;
  transform-origin:0% 50%;
}
.container .paper:nth-child(2){
  transform:rotate(180deg);
}
.container .paper {
  @for $i from 3 through 12{
    &:nth-child(#{$i}){
      animation : flip 2.5s infinite ease-in-out;
      animation-delay:logarithm($i) *0.5s;
    }
  }
}
@keyframes flip{
  0%{}
  30%{
    transform:rotateY(-180deg);
  }
  100%{
    transform:rotateY(-180deg);
  }
}