<div class="cssload-preloader">
			<span>L</span>
		<span>o</span>
		<span>a</span>
		<span>d</span>
		<span>i</span>
		<span>n</span>
		<span>g</span>

</div>
.cssload-preloader {
	font-family: Arial, Tahoma;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 10;
	display: box;
		display: -o-box;
		display: -ms-box;
		display: -webkit-box;
		display: -moz-box;
	display: flex;
		display: -o-flex;
		display: -ms-flex;
		display: -webkit-flex;
		display: -moz-flex;
	box-pack: center;
		-o-box-pack: center;
		-ms-box-pack: center;
		-webkit-box-pack: center;
		-moz-box-pack: center;
	justify-content: center;
		-o-justify-content: center;
		-ms-justify-content: center;
		-webkit-justify-content: center;
		-moz-justify-content: center;
	box-align: center;
		-o-box-align: center;
		-ms-box-align: center;
		-webkit-box-align: center;
		-moz-box-align: center;
	align-items: center;
		-o-align-items: center;
		-ms-align-items: center;
		-webkit-align-items: center;
		-moz-align-items: center;
	transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
	perspective: 487px;
		-o-perspective: 487px;
		-ms-perspective: 487px;
		-webkit-perspective: 487px;
		-moz-perspective: 487px;
	overflow: hidden;
	animation: wobble 3s ease-in-out infinite;
		-o-animation: wobble 3s ease-in-out infinite;
		-ms-animation: wobble 3s ease-in-out infinite;
		-webkit-animation: wobble 3s ease-in-out infinite;
		-moz-animation: wobble 3s ease-in-out infinite;
	padding-bottom: 2em;
}


.cssload-preloader > span {
	font-size: 49px;
	animation: 3s ease-in-out infinite;
		-o-animation: 3s ease-in-out infinite;
		-ms-animation: 3s ease-in-out infinite;
		-webkit-animation: 3s ease-in-out infinite;
		-moz-animation: 3s ease-in-out infinite;
	color: transparent;
	text-shadow: 0 0 0px rgb(0,0,0);
}
span:nth-child(-n+3) {
	animation-delay: -1.495s;
		-o-animation-delay: -1.495s;
		-ms-animation-delay: -1.495s;
		-webkit-animation-delay: -1.495s;
		-moz-animation-delay: -1.495s;
}

span:nth-child(1),
span:nth-last-child(1) {
	animation-name: blur-1;
		-o-animation-name: blur-1;
		-ms-animation-name: blur-1;
		-webkit-animation-name: blur-1;
		-moz-animation-name: blur-1;
}



span:nth-child(2),
span:nth-last-child(2) {
	animation-name: blur-2;
		-o-animation-name: blur-2;
		-ms-animation-name: blur-2;
		-webkit-animation-name: blur-2;
		-moz-animation-name: blur-2;
}



span:nth-child(3),
span:nth-last-child(3) {
	animation-name: blur-3;
		-o-animation-name: blur-3;
		-ms-animation-name: blur-3;
		-webkit-animation-name: blur-3;
		-moz-animation-name: blur-3;
}






@keyframes blur-1 {
	50% {
		text-shadow: 0 0 0.15em rgb(0,0,0);
	}
}

@-o-keyframes blur-1 {
	50% {
		text-shadow: 0 0 0.15em rgb(0,0,0);
	}
}

@-ms-keyframes blur-1 {
	50% {
		text-shadow: 0 0 0.15em rgb(0,0,0);
	}
}

@-webkit-keyframes blur-1 {
	50% {
		text-shadow: 0 0 0.15em rgb(0,0,0);
	}
}

@-moz-keyframes blur-1 {
	50% {
		text-shadow: 0 0 0.15em rgb(0,0,0);
	}
}

@keyframes blur-2 {
	50% {
		text-shadow: 0 0 0.075em rgb(0,0,0);
	}
}

@-o-keyframes blur-2 {
	50% {
		text-shadow: 0 0 0.075em rgb(0,0,0);
	}
}

@-ms-keyframes blur-2 {
	50% {
		text-shadow: 0 0 0.075em rgb(0,0,0);
	}
}

@-webkit-keyframes blur-2 {
	50% {
		text-shadow: 0 0 0.075em rgb(0,0,0);
	}
}

@-moz-keyframes blur-2 {
	50% {
		text-shadow: 0 0 0.075em rgb(0,0,0);
	}
}

@keyframes blur-3 {
	50% {
		text-shadow: 0 0 0.05em rgb(0,0,0);
	}
}

@-o-keyframes blur-3 {
	50% {
		text-shadow: 0 0 0.05em rgb(0,0,0);
	}
}

@-ms-keyframes blur-3 {
	50% {
		text-shadow: 0 0 0.05em rgb(0,0,0);
	}
}

@-webkit-keyframes blur-3 {
	50% {
		text-shadow: 0 0 0.05em rgb(0,0,0);
	}
}

@-moz-keyframes blur-3 {
	50% {
		text-shadow: 0 0 0.05em rgb(0,0,0);
	}
}

@keyframes wobble {
	from, to {
		transform: rotateY(-45deg);
	}
	50% {
		transform: rotateY(45deg);
	}
}

@-o-keyframes wobble {
	from, to {
		-o-transform: rotateY(-45deg);
	}
	50% {
		-o-transform: rotateY(45deg);
	}
}

@-ms-keyframes wobble {
	from, to {
		-ms-transform: rotateY(-45deg);
	}
	50% {
		-ms-transform: rotateY(45deg);
	}
}

@-webkit-keyframes wobble {
	from, to {
		-webkit-transform: rotateY(-45deg);
	}
	50% {
		-webkit-transform: rotateY(45deg);
	}
}

@-moz-keyframes wobble {
	from, to {
		-moz-transform: rotateY(-45deg);
	}
	50% {
		-moz-transform: rotateY(45deg);
	}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.