Metro style loading animation in pure CSS

index.html

<div class="loader more">
</div>

Metro style loading animation in pure CSS.markdown

Metro style loading animation in pure CSS

Prefix-free loading animation, inspired by Metro and Windows 8

A Pen by Girish Sharma on CodePen.

License.

script.js

/**
 * Prefix-free loading animation,
 * inspired by Metro and Windows 8
 */

style.css

/**
 * This work is licensed under the Creative Commons
 * Attribution 3.0 Unported License. To view a copy
 * of this license, visit http://creativecommons.org/licenses/by/3.0/.
 *
 * Author: Girish Sharma <[email protected]>
 */

/* Demo specific styles begin */

* {margin: 0; padding: 0;}
body {	
	background: #eee;
}
.loader {
  top: 50%;
}
/* Demo specific styles end */

/* Loader with three blocks */
.loader, .loader:before, .loader:after {
  display: inline-block;
  width: 100%;
  height: 10px;
  position: absolute;
  z-index: 100000;
  animation: loading 4s cubic-bezier(.1,.85,.9,.15) infinite, loading-opacity 2s ease-in-out infinite alternate;
  background: linear-gradient(to right, teal 0px, teal 10px, transparent 10px)  no-repeat 0px 0px / 10px 10px;
  content: ' ';
}
.loader {
  animation-delay: .1s;
}
.loader:after {
  animation-delay: .2s;
}
@keyframes loading-opacity {
	0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes loading {
	0% {
    background-position: -50% 0px;
  }
  100% {
    background-position: 150% 0px;
  }
}

/* 2 more loading blocks */
.loader.more:before, .loader.more:after {
  content: ' ■';
  color: teal;
  top: 0;
  line-height: 6px;
  font-size: 22px;
  font-family: "Times New Roman";
  vertical-align: top;
  animation: loading 4s cubic-bezier(.1,.85,.9,.15) infinite, loading-font 4s cubic-bezier(.1,.85,.9,.15) infinite !important;
}
.loader.more:before {
  animation-delay: 0s,.2s !important;
}
.loader.more {
  overflow: hidden;
  opacity: 0;
  animation: loading 4s cubic-bezier(.1,.85,.9,.15) infinite, loading-opacity 2s ease-in-out infinite alternate;
  animation-delay: .6s,.4s !important;
}
.loader.more:after {
  animation-delay: .4s,.8s !important;
}
@keyframes loading-font {
	0% {
    text-indent: calc(-50% - 5px);
  }
  100% {
    text-indent: calc(150% - 10px);
  }
}