Cube Loader

Cube Loader

Cube Loader

index.html

<h1>Cube Fliping Loader</h1>
<div class="cube-wrapper">
  <div class="cube-folding">
    <span class="leaf1"></span>
    <span class="leaf2"></span>
    <span class="leaf3"></span>
    <span class="leaf4"></span>
  </div>
  <span class="loading" data-name="Loading">Loading</span>
</div>

<!-- follow me template -->
<div class="made-with-love">
  Made with 
  <i>♥</i> by 
  <a target="_blank" href="http://codepen.io/nikhil8krishnan">Nikhil Krishnan</a>
</div> 

style.scss

@import "compass";

//variables
$size          : 50px;
$primary-color : white;

//cube only
.cube-folding{
  width: $size;
  height: $size;
  display: inline-block;
  @include transform(rotate(45deg));
  font-size: 0;
  span{
    position: relative;
    width: $size/2;
    height: $size/2;
    @include transform(scale(1.1));
    display: inline-block;
    &::before{
      content: '';
      background-color: $primary-color;
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: $size/2;
      height: $size/2;
      -moz-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
      -webkit-transform-origin: 100% 100%;
      transform-origin: 100% 100%;
      @include animation(folding 2.50s infinite linear both);
    }
  }
  .leaf2{
    @include transform(rotateZ(90deg) scale(1.1));
    &::before{
      @include animation-delay(.30s);
      background-color: darken($primary-color, 5%);
    }
  }
  .leaf3{
    @include transform(rotateZ(270deg) scale(1.1) );
    &::before{
      @include animation-delay(.90s);
      background-color: darken($primary-color, 5%);
    }
  }
  .leaf4{
    @include transform(rotateZ(180deg) scale(1.1));
    &::before{
      @include animation-delay(.60s);
      background-color: darken($primary-color, 10%);
    }
  }
}

//animation
@include keyframes(folding, folding animation) {
  0%, 10%{
    @include transform(perspective(140px) rotateX(-180deg));
    @include opacity(0);
  }
  25%, 75%{
    @include transform(perspective(140px) rotateX(0deg));
    @include opacity(1);
  }
  90%, 100%{
    @include transform(perspective(140px) rotateY(180deg)); 
    @include opacity(0);
  }
}

//with loading text and shadow
.cube-wrapper{  
  position: fixed;
  left: 50%;
  top: 50%;
  margin-top: -$size;
  margin-left: -$size;
  width: $size*2;
  height: $size*2;
  text-align: center;
  //shadow
  &:after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    margin: auto;
    width: $size*2;
    height: 6px;
    background-color: rgba(black,.1);
    @include filter(blur(2px));
    @include border-radius(100%);
    z-index: 1;
    @include animation(shadow 0.5s ease infinite alternate);
  }
  .loading{
    font-size: 12px;
    letter-spacing: 0.1em;
    display: block;
    color: $primary-color;
    position: relative;
    top: 20px;
    z-index: 2;
    @include animation(text 0.5s ease infinite alternate);
    }
}
@include keyframes(text, text animation) {
  100%{
    top: 30px;
  }
}
@include keyframes(shadow, shadow animation) {
  100%{
    bottom: -18px;
  }
}
 
////page styles
@import url(https://fonts.googleapis.com/css?family=Archivo+Narrow);

html,body{
  min-height: 100%;
}
body{
  background: #00c6ff; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #00c6ff , #0072ff); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #00c6ff , #0072ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  font-family: arial;
} 
h1{
  font-size: 26px;
  display: block;
  text-align: center;
  color: #fff;
  padding: 50px 20px;
  font-weight: 300;
  font-family: 'Archivo Narrow', sans-serif;
}
//follow me template
.made-with-love{
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 10px;
  text-align: center;
  font-size: 10px;
  z-index: 9999;
  font-family: arial;
  color: #fff;
  i{
    font-style: normal;
    color: #F50057;
    font-size: 14px;
    position: relative;
    top: 2px;
  }
  a{
    color: #fff;
    text-decoration: none;
    &:hover{
      text-decoration: underline;
    }
  }
}