CodePen

HTML

            
              <div class="container">
    <h1>Loading...</h1>
    <ul>
      <li>
        <div class="loading">
          <div class="icon">✓</div>
          <div class="circle"></div>
        </div>
      </li>
      <li>
        <div class="loading ">
          <div class="icon">✓</div>
          <div class="circle spin-cw"></div>
        </div>
      </li>
      <li>
        <div class="loading rotate-y">
          <div class="icon">✓</div>
          <div class="circle"></div>
        </div>
      </li>
      <li>
        <div class="loading">
          <div class="icon">✓</div>
          <div class="circle rotate-spin"></div>
        </div>
      </li>
    </ul>
 
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              $green: #84e900;
$text-color: $green - 50;
$size: 60px;

html {
  height: 100%;
}

body {
  @include filter-gradient($green, darken($green, 20), horizontal);
  $experimental-support-for-svg: true;
  @include background-image(linear-gradient(top, $green + 150 0%, $green + 110 100%));
  height: 100%;
}



.container {
  @include text-shadow(1px 1px 0 rgba($green, .3));
  margin: 0 auto;
  padding: 40px 0 0;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  width: 400px;
}

h1 {
  color: rgba($text-color, .4);
}

ul {
  @include box-sizing(border-box);
  margin: 0;
  padding: 0;
  width: 100%;
}

li { 
  display: inline-block; 
  height: $size;
  margin: 0 10px;
}

.loading {
  margin: 0;
  padding: 0;
  position: relative;
  width: $size;
}

.icon,
.circle {
  height: $size;
  left: 0;
  line-height: $size;
  position: absolute;
  top: 0;
  width: $size;
}

.icon {
  color: $text-color;
  font-size: 30px;
}
.circle {
  @include border-radius(50%);
  @include box-sizing(border-box);
  border: 6px solid $text-color;
  color: $text-color;
  display: block;
  font-size: 30px;
  height: $size;
  line-height: 50px;
  margin: 0 auto;
  width: $size;
  
  -webkit-perspective: 300;  /* Safari 4+, Chrome 12+ */
     -moz-perspective: 300;  /* Firefox 10+ */
      -ms-perspective: 300;  /* IE10+ */
          perspective: 300;
  
  -webkit-transform: rotateY(0deg);  
  -webkit-transform-style: preserve-3d;
    
  -moz-transform: rotateY(0deg);     
  -moz-transform-style: preserve-3d;
      
  -ms-transform: rotateY(0deg);      
  -ms-transform-style: preserve-3d;
          
  transform: rotateY(0deg);          
  transform-style: preserve-3d;
}

.rotate-y { 
  -webkit-animation: rotate-y 1.3s linear .2s infinite;
  -moz-animation: rotate-y 1.3s linear .2s infinite;
  animation: rotate-y 1.3s linear .2s infinite; 
}

.spin-cw {
  border-bottom-color: transparent;
  
  -webkit-animation: spin-cw 1.3s linear .2s infinite;
  -moz-animation: spin-cw 1.3s linear .2s infinite;
  animation: spin-cw 1.3s linear .2s infinite; 
}

.rotate-spin {
  border-bottom-color: transparent;
  
  -webkit-animation: rotate-spin 1.3s linear .2s infinite;
  -moz-animation: rotate-spin 1.3s linear .2s infinite;
  animation: rotate-spin 1.3s linear .2s infinite; 
}









// Spinning Animation Keyframes
// ------------------
@-webkit-keyframes spin-cw {
  0%   { -webkit-transform:rotate(0deg);  }
  100% { -webkit-transform:rotate(360deg); }
}
@-moz-keyframes spin-cw {
  0%   { -moz-transform:rotate(0deg); }
  100% { -moz-transform:rotate(360deg); }
}
@-o-keyframes spin-cw {
  0%   { -o-transform:rotate(0deg); }
  100% { -o-transform:rotate(360deg); }
}
@keyframes spin-cw {
  0%   { transform:rotate(0deg);  }
  100% { transform:rotate(360deg); }
}


@-webkit-keyframes spin-ccw {
  0%   { -webkit-transform:rotate(360deg);  }
  100% { -webkit-transform:rotate(0deg); }
}
@-moz-keyframes spin-ccw {
  0%   { -moz-transform:rotate(360deg); }
  100% { -moz-transform:rotate(0deg); }
}
@-o-keyframes spin-ccw {
  0%   { -o-transform:rotate(360deg); }
  100% { -o-transform:rotate(0deg); }
}
@keyframes spin-ccw {
  0%   { transform:rotate(360deg);  }
  100% { transform:rotate(0deg); }
}


// Rotate around y-axis
@-webkit-keyframes rotate-y {
  0%   { -webkit-transform: rotateY(0deg);  }
  100% { -webkit-transform: rotateY(360deg); }
}
@-moz-keyframes rotate-y {
  0%   { -moz-transform: rotateY(0deg); }
  100% { -moz-transform: rotateY(360deg); }
}
@keyframes rotate-y {
  0%   { transform: rotateY(0deg);  }
  100% { transform: rotateY(360deg); }
}


// Rotate AND Spin!
@-webkit-keyframes rotate-spin {
  0%   { -webkit-transform: rotateY(0deg) rotateZ(0deg); }
  100% { -webkit-transform: rotateY(360deg) rotateZ(360deg); }
}
@-moz-keyframes rotate-spin {
  0%   { -moz-transform:rotate(360deg); }
  100% { -moz-transform:rotate(0deg); }
}
@-o-keyframes rotate-spin {
  0%   { -o-transform:rotate(360deg); }
  100% { -o-transform:rotate(0deg); }
}
@keyframes rotate-spin {
  0%   { transform:rotate(360deg);  }
  100% { transform:rotate(0deg); }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................