Random Grid Loading Animation – Stunning CSS

thumbnail

In this tutorial, you will read about creating random grid loading animation using CSS. If your website has lots of content and takes more than a few seconds for loading time, you might want to consider adding some loading animation. A nice looking loader will keep the user engaged as well as entertaining them (well, at least for a while).

The CSS code is shown in below:

@import "compass/css3";

$blockSize: 2em;
$blockSize: 6vmin; // Try this in Firefox! Viewport based size, which doesn't work in Canary at the moment

// Duration to set the animation time
$delay: .065s;
$duration: .88s;
$startingColor: #fdfdfd;
$endingColor: #dadada;

// Calculate values of the blocks
$blockMargin: $blockSize / 3;
$loaderSize: $blockSize * 3 + $blockMargin * 2;

@mixin animation-delay( $delay ) {
  -webkit-animation-delay: $delay;
  animation-delay: $delay;
}

// Official syntax supported by IE10, FF16, Opera 12.1,
// so we're only going to add the webkit prefix
@mixin animation( $ani1:null, $ani2:null ) {
  @if ($ani2 != null) {
    -webkit-animation: $ani1, $ani2;
    animation: $ani1, $ani2;
  }
  
  @else if ($ani1 != null) {
    -webkit-animation: $ani1;
    animation: $ani1;
  }
}

body {
  text-align: center;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: $loaderSize;
  height: $loaderSize;
  margin-left: -$loaderSize/2;
  margin-top: -$loaderSize/2;
}

.loader-block {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  opacity: 0;
  width: $blockSize;
  height: $blockSize;
  background: $startingColor;
  @include animation(show $duration step-end infinite alternate,
    pulse $duration linear infinite alternate);
}

// First block
.loader-block:nth-child(1) {
  @include translate(($blockSize * 2) + ($blockMargin * 2), ($blockSize * 2) + ($blockMargin * 2));
}

// Second block
.loader-block:nth-child(2) {
  @include translate(0, 0);
  @include animation-delay(1 * $delay);
}

// Third block
.loader-block:nth-child(3) {
  @include translate($blockSize + $blockMargin, $blockSize + $blockMargin);
  @include animation-delay(2 * $delay);
}

// Fourth block
.loader-block:nth-child(4) {
  @include translate(($blockSize * 2) + ($blockMargin * 2), 0);
  @include animation-delay(3 * $delay);
}

// Fifth block
.loader-block:nth-child(5) {
  @include translate($blockSize + $blockMargin, ($blockSize * 2) + ($blockMargin * 2));
  @include animation-delay(4 * $delay);
}

// Sixth block
.loader-block:nth-child(6) {
  @include translate(0, $blockSize + $blockMargin);
  @include animation-delay(5 * $delay);
}

// Seventh block
.loader-block:nth-child(7) {
  @include translate(0, ($blockSize * 2) + ($blockMargin * 2));
  @include animation-delay(6 * $delay);
}

// Eighth block
.loader-block:nth-child(8) {
  @include translate(($blockSize * 2) + ($blockMargin * 2), $blockSize + $blockMargin);
  @include animation-delay(7 * $delay);
}

// Ninth block
.loader-block:nth-child(9) {
  @include translate($blockSize + $blockMargin, 0);
  @include animation-delay(2 * $delay);
}

@-webkit-keyframes pulse {
  from,
  40% { 
    background: $startingColor;
  }
  to {
    background: $endingColor;
  }
}

@-webkit-keyframes show {
  from, 40% { opacity: 0; }
  41%, to { opacity: 1; }
}

@keyframes pulse {
  from,
  40% { 
    background: $startingColor;
  }
  to {
    background: $endingColor;
  }
}

@keyframes show {
  from, 40% { opacity: 0; }
  41%, to { opacity: 1; }
}

html,
body {
  height: 100%;
}

body {
  @include background(#999 radial-gradient(circle farthest-side, #333, #111));
}

The HTML code is shown in below:

<div class="loader">
  <span class="loader-block"></span>
  <span class="loader-block"></span>
  <span class="loader-block"></span>
  <span class="loader-block"></span>
  <span class="loader-block"></span>
  <span class="loader-block"></span>
  <span class="loader-block"></span>
  <span class="loader-block"></span>
  <span class="loader-block"></span>
</div>

The output is will be:

Back To Top