Animating Loading

by Faisal Khan Janjua

HTML

<div class="holder">
  <div class="cssload-preloader cssload-loading">
    <span class="cssload-slice"></span>
    <span class="cssload-slice"></span>
    <span class="cssload-slice"></span>
    <span class="cssload-slice"></span>
    <span class="cssload-slice"></span>
    <span class="cssload-slice"></span>
  </div>
</div>

CSS

.holder{
  position:relative;
  margin:40px;
  padding:20px;
}
.cssload-preloader {
	position: absolute;
	left: 50%;
	font-size: 19px;
	display: block;
	width: 3.75em;
	height: 4.25em;
	margin-left: -1.875em;
	margin-top: -2.125em;
	transform-origin: center center;
		-o-transform-origin: center center;
		-ms-transform-origin: center center;
		-webkit-transform-origin: center center;
		-moz-transform-origin: center center;
	transform: rotateY(180deg) rotateZ(-60deg);
		-o-transform: rotateY(180deg) rotateZ(-60deg);
		-ms-transform: rotateY(180deg) rotateZ(-60deg);
		-webkit-transform: rotateY(180deg) rotateZ(-60deg);
		-moz-transform: rotateY(180deg) rotateZ(-60deg);
}

.cssload-preloader .cssload-slice {
	border-top: 1.125em solid transparent;
	border-right: none;
	border-bottom: 1em solid transparent;
	border-left: 1.875em solid #f7484e;
	position: absolute;
	top: 0px;
	left: 50%;
	transform-origin: left bottom;
		-o-transform-origin: left bottom;
		-ms-transform-origin: left bottom;
		-webkit-transform-origin: left bottom;
		-moz-transform-origin: left bottom;
	border-radius: 3px 3px 0 0;
}

.cssload-preloader .cssload-slice:nth-child(1) {
	transform: rotateZ(60deg) rotateY(0deg) rotateX(0);
		-o-transform: rotateZ(60deg) rotateY(0deg) rotateX(0);
		-ms-transform: rotateZ(60deg) rotateY(0deg) rotateX(0);
		-webkit-transform: rotateZ(60deg) rotateY(0deg) rotateX(0);
		-moz-transform: rotateZ(60deg) rotateY(0deg) rotateX(0);
	animation: 0.17s linear 0.94s preload-hide-1 both 1;
		-o-animation: 0.17s linear 0.94s preload-hide-1 both 1;
		-ms-animation: 0.17s linear 0.94s preload-hide-1 both 1;
		-webkit-animation: 0.17s linear 0.94s preload-hide-1 both 1;
		-moz-animation: 0.17s linear 0.94s preload-hide-1 both 1;
}

.cssload-preloader .cssload-slice:nth-child(2) {
	transform: rotateZ(120deg) rotateY(0deg) rotateX(0);
		-o-transform: rotateZ(120deg) rotateY(0deg) rotateX(0);
		-ms-transform: rotateZ(120deg) rotateY(0deg) rotateX(0);
		-webkit-transform:...