A Pen by Ashley Nolan.

2D-and-3D-Block-Loaders.markdown

2D and 3D Block Loaders

A selection of loaders all based around a line of 6 blocks.

Uses CSS3 animation and transforms to create a variety of subtle loading effects.

Inspired by the loading animation on the PSN mobile site (which uses the Flip Delay Up example for their loader).

For more info, see: http://ashleynolan.co.uk/blog/a-collection-of-animated-loaders

A Pen by Ashley Nolan on CodePen.

License.

index.html

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

<h1>A collection of loaders using CSS 2D and 3D transforms <a href="https://twitter.com/AshNolan_" target="blank">created by @AshNolan_</a></h1>


<h2>Flip Delay Up</h2>

<div class="loader loader--flipDelay loader--3d">
  <span class="loader-item">1</span>
  <span class="loader-item">2</span>
  <span class="loader-item">3</span>
  <span class="loader-item">4</span>
  <span class="loader-item">5</span>
  <span class="loader-item">6</span>
</div>


<h2>Flip Delay Down</h2>

<div class="loader loader--flipDelayDown loader--3d">
  <span class="loader-item">1</span>
  <span class="loader-item">2</span>
  <span class="loader-item">3</span>
  <span class="loader-item">4</span>
  <span class="loader-item">5</span>
  <span class="loader-item">6</span>
</div>

<h2>Flip Effect 2D</h2>

<div class="loader loader--slowFlip">
  <span class="loader-item">1</span>
  <span class="loader-item">2</span>
  <span class="loader-item">3</span>
  <span class="loader-item">4</span>
  <span class="loader-item">5</span>
  <span class="loader-item">6</span>
</div>

<h2>Flip Effect 3D</h2>

<div class="loader loader--slowFlip loader--3d">
  <span class="loader-item">1</span>
  <span class="loader-item">2</span>
  <span class="loader-item">3</span>
  <span class="loader-item">4</span>
  <span class="loader-item">5</span>
  <span class="loader-item">6</span>
</div>


<h2>Horizontal Flip 3D</h2>

<div class="loader loader--flipHoz loader--3d">
  <span class="loader-item">1</span>
  <span class="loader-item">2</span>
  <span class="loader-item">3</span>
  <span class="loader-item">4</span>
  <span class="loader-item">5</span>
  <span class="loader-item">6</span>
</div>


<h2>Horizontal Fade</h2>

<div class="loader loader--fade">
  <span class="loader-item">1</span>
  <span class="loader-item">2</span>
  <span class="loader-item">3</span>
  <span class="loader-item">4</span>
  <span class="loader-item">5</span>
  <span class="loader-item">6</span>
</div>


<h2>Slide Down</h2>

<div class="loader loader--slideDown">
  <span class="loader-item">1</span>
  <span class="loader-item">2</span>
  <span class="loader-item">3</span>
  <span class="loader-item">4</span>
  <span class="loader-item">5</span>
  <span class="loader-item">6</span>
</div>



<h2>Slide Up</h2>

<div class="loader loader--slideUp">
  <span class="loader-item">1</span>
  <span class="loader-item">2</span>
  <span class="loader-item">3</span>
  <span class="loader-item">4</span>
  <span class="loader-item">5</span>
  <span class="loader-item">6</span>
</div>

<h2>Slide Both</h2>

<div class="loader loader--slideBoth">
  <span class="loader-item">1</span>
  <span class="loader-item">2</span>
  <span class="loader-item">3</span>
  <span class="loader-item">4</span>
  <span class="loader-item">5</span>
  <span class="loader-item">6</span>
</div>

style.scss

$itemSize : 50;
$itemSpacing : 2;
$squareSize : 40;
$loaderColor : rgba(61, 92, 126, 0.7);
$loaderDelay : 100;
$loaderDuration : 2000;
$animationTiming: cubic-bezier(.645, .045, .355, 1);

body {
  font-family: 'PT Sans', sans-serif;
  text-align: center;
  background-color: #000;
  padding-top: 40px;
}

h1, h2 {
  background-color: rgba(200, 200, 200, 0.2);
  padding: 20px;
  text-transform: uppercase;
  color: #fff;
}
h1 {
  font-size: 24px;
  margin-bottom: 40px;
  
  a {
    display: block;
    margin-top: 10px;
    text-transform: none;
    color: #aaa;
    font-size: 16px;
    text-decoration: none;
  }
}
h2 {
  font-size: 16px;
  margin-bottom: 15%;
}

.loader {
  display: block;
  overflow: hidden;
  margin-bottom: 15%;
  font-size: 0;
}
.loader--3d {
  transform-style: preserve-3d;
  perspective: 800px;
}
.loader--slideBoth {
  overflow: visible;
}

.loader-item {
  display: inline-block;
  width: $itemSize + px;
  height: $itemSize + px;
  margin-left: $itemSpacing + px;
  background-color: $loaderColor;
  color: $loaderColor;
  
  
  animation-duration: $loaderDuration + ms;
  animation-timing-function: $animationTiming;
  animation-iteration-count: infinite;
  
  
  //loop through to add an animation delay
  @for $i from 1 through 6 {
    &:nth-child(#{$i}) {
      animation-delay: ($i * $loaderDelay) + ms;
    }
  }

  //add slowFlip to the first one
  .loader--slowFlip & {
    animation-name: slowFlip;
  }
  .loader--flipHoz & {
    animation-name: flipHoz;
  }
  .loader--fade & {
    animation-name: fade;
    animation-duration: ($loaderDuration/2) + ms;
  }
  .loader--slowFlip &,
  .loader--flipHoz & {
    @for $i from 1 through 6 {
      &:nth-child(#{$i}) {
        animation-delay: ($i * $loaderDelay*1.5) + ms;
      }
    }
  }
  

  .loader--flipDelay & {
    animation-name: flipDelay;
  }
  .loader--flipDelayDown & {
    animation-name: flipDelay;
    animation-direction: reverse;
  }

  .loader--slideDown &,
  .loader--slideUp & {
    animation-name: slideDown;
    animation-duration: ($loaderDuration/2.5) + ms;
    animation-timing-function: linear;
  }

 .loader--slideDown & {
    transform-origin: top left;
 }
 .loader--slideUp & {
    transform-origin: bottom left;
 }
 .loader--slideBoth & {
    animation-name: slideBoth;
   animation-duration: ($loaderDuration/2) + ms;
    transform-origin: bottom left;
   animation-timing-function: linear;
 }
}


/**********************************/
/* KEYFRAME ANIMATION DEFINITIONS */
/**********************************/

@keyframes slowFlip {
  0%    { transform: rotateX(0deg);   }
  40%   { transform: rotateX(180deg); }
  100%  { transform: rotateX(180deg); }
}


@keyframes flipHoz {
  0%    {  transform: rotateY(0deg);   }
  40%   { transform: rotateY(180deg);  }
  100%  { transform: rotateY(180deg);  }
}

@keyframes fade {
  0%    { opacity: 0;  }
  50%   { opacity: 1;  }
  100%  { opacity: 0;  }
}


@keyframes flipDelay {
  0% {
    transform: rotateX(0deg);
    transform-origin: 0 0 0;
    opacity: 1;
  }
  30% {
    transform: rotateX(90deg);
    transform-origin: 0 0 0;
    opacity: 0;
  }
  40% {
    transform-origin: 0 0 0;
  }
  60% {
    transform: rotateX(90deg);
    opacity: 0;
    transform-origin: 0 100% 0;
  }
  90% {
    transform: rotateX(0deg);
    opacity: 1;
    transform-origin: 0 100% 0;
  }
}

@keyframes slideDown {
  0%  { transform: rotateX(0deg);  }
  50% { transform: rotateX(90deg); }
}
@keyframes slideBoth {
  0%    { transform: rotateX(0deg);   }
  100%  { transform: rotateX(360deg); }
}