CodePen

HTML

            
              number_of_cubes = 10

mixin cube
  div.cube
    div.left
    div.center
    div.right
    div.bottom
    div.shadow

doctype html
html
  head
    title "Loading bars"
body
div#vignette
div#container
  div#pos
    - for (var x = 0; x < number_of_cubes; x++)
      +cube()
            
          
!

CSS

            
              $number-of-cubes: 10;
$cubes-margin: 5px;

$bar-height: 100px;
$bar-width: 12px;
$bar-depth: 10px;

$rotX: 35deg;
$rotY: -10deg;
$rotZ: 5deg;
$transX: -100px;
$transY: 10px;

$animSpeed: 1.2s;

$perspective: 2200px;


@for $i from 1 through $number-of-cubes {
  .cube:nth-child(#{$i}),
  .cube:nth-child(#{$i}) div
    {
      z-index: $i;
      animation-delay: $i*($animSpeed/12);
    }
}



html{
 height: 100%; 
}

body{
    background-color: #323036;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: table;
}

#vignette{
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 4;
  
    background-image: -webkit-radial-gradient(50% 50%, ellipse cover, rgba(0,0,0,0), rgba(0,0,0,0.5));  
}

#pos{
  width: ($bar-width + $cubes-margin) * $number-of-cubes;
  margin: 0 auto;
}



#container{
  width: 100%;
  perspective: $perspective;
  padding: 20px 60px;
  position: relative;
  display: table-cell;
  vertical-align: middle;
}

.cube{
  width: $bar-width;
  height: $bar-height;
  position: relative;
  margin-right: $cubes-margin;
  float: left;
  transform-style: preserve-3d;
  box-shadow: 0 0 5px rgba(0,0,0, .2);
  animation: animCube; /* Safari and Chrome */
  animation-iteration-count: infinite;
  opacity: .75;
}

.cube div{
  position: absolute;
  display: block;
  width: $bar-width;
  height: $bar-height;
}

.cube .center{
  width: $bar-width;
  box-shadow: 0 0 3px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.05);
  animation: animCenter;
  animation-iteration-count: infinite;
}

.cube .bottom{
  width: $bar-width;
  height: 10px;
  bottom: 0;
  transform: rotateX(90deg);
  transform-origin: center bottom;
  animation: animBottom;
  animation-iteration-count: infinite;
}

.cube .left{
  left: 0;
  transform: rotateY(90deg);
  transform-origin: left center;
  animation: animSide;
  animation-iteration-count: infinite;
}

.cube .right{
  right: 0;
  transform: rotateY(-90deg);
  transform-origin: right center;
  animation: animSide;
  animation-iteration-count: infinite;
}

.cube .left,
.cube .center,
.cube .right,
.cube .bottom,
.cube{
  animation-duration: $animSpeed;
  animation-timing-function: ease-in-out;
}

.left,
.right{
  background-color: #2b2830;
  background-image: linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0));
}


.center{
    background-color: #2b2830;
    background-image: linear-gradient(top, rgba(255,255,255,0.15), rgba(255,255,255,0)); 
}

.bottom{
    background-color: #1f1d23;
    background-image: linear-gradient(bottom, rgba(255,255,255,0.1), rgba(255,255,255,0)); 
}

@keyframes animCube
{
    30%  {  transform: translateZ($bar_height) translatex($transX) translateY($transY) rotatex($rotX) rotatey($rotY) rotateZ($rotZ);
	          box-shadow: 0 0 20px rgba(0,0,0,.5), 0 12px 20px 1px rgba(0,0,0,.5);
	 }

    100%  {  
	          transform: translateZ(0px) rotatez(0deg);
	          box-shadow: 0 0 30px rgba(0,0,0,.5), 0 0 0 0 rgba(0,0,0,0);
    }
}

@keyframes animSide
{
    30%  {  width: $bar-depth;
            background-color: #1d1c1f;      
    }
    95%  {  width: 10px; }
}

@keyframes animBottom
{
    30%  {  height: $bar-depth; }
    95%  {  height: 10px; }
}



@keyframes animCenter /* Safari and Chrome */
{
    20%  {  background-color: #d1d0fa;
	    box-shadow: 0 0 3px rgba(255,255,255,0.15), inset 0 1px rgba(255,255,255,.5);
	 }
    65%  {  
	    box-shadow: 0 0 3px rgba(255,255,255,0), inset 0 1px rgba(255,255,255,.25);
}
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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