Custom Css Page Preloader in WordPress

2 Views

i made a custom css animation for a website so it shows every time a page is loading.
The problem is i cant find a way to use this animation in a wordpress site.

I am an experience wordpress user and was hoping that after the animation was done it would be really easy to do this but i cant find the answer.

Read More

Here is my snippet. How do i use it in wordpress? 

#cssload-loader {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	width: 88px;
}
#cssload-loader ul {
	margin: 0;
	list-style: none;
	width: 88px;
	height: 63px;
	position: relative;
	padding: 0;
	height: 10px;
}
#cssload-loader ul li {
	position: absolute;
	width: 8px;
	height: 0;
	background-color: #154093;
	bottom: 0;
}


#cssload-loader li:nth-child(1) {
	left: 0;
	animation: cssload-sequence1 1.15s ease infinite 0;
		-o-animation: cssload-sequence1 1.15s ease infinite 0;
		-ms-animation: cssload-sequence1 1.15s ease infinite 0;
		-webkit-animation: cssload-sequence1 1.15s ease infinite 0;
		-moz-animation: cssload-sequence1 1.15s ease infinite 0;
}
#cssload-loader li:nth-child(2) {
	left: 15px;
	animation: cssload-sequence2 1.15s ease infinite 0.12s;
		-o-animation: cssload-sequence2 1.15s ease infinite 0.12s;
		-ms-animation: cssload-sequence2 1.15s ease infinite 0.12s;
		-webkit-animation: cssload-sequence2 1.15s ease infinite 0.12s;
		-moz-animation: cssload-sequence2 1.15s ease infinite 0.12s;
}
#cssload-loader li:nth-child(3) {
	left: 29px;
	animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
		-o-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
		-ms-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
		-webkit-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
		-moz-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
}
#cssload-loader li:nth-child(4) {
	left: 44px;
	animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
		-o-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
		-ms-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
		-webkit-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
		-moz-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
}
#cssload-loader li:nth-child(5) {
	left: 58px;
	animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
		-o-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
		-ms-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
		-webkit-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
		-moz-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
}
#cssload-loader li:nth-child(6) {
	left: 73px;
	animation: cssload-sequence2 1.15s ease infinite 0.58s;
		-o-animation: cssload-sequence2 1.15s ease infinite 0.58s;
		-ms-animation: cssload-sequence2 1.15s ease infinite 0.58s;
		-webkit-animation: cssload-sequence2 1.15s ease infinite 0.58s;
		-moz-animation: cssload-sequence2 1.15s ease infinite 0.58s;
}
#cssload-loader li:nth-child(7) {
	left: 87px;
	animation: cssload-sequence2 1.15s ease infinite 0.12s;
		-o-animation: cssload-sequence2 1.15s ease infinite 0.12s;
		-ms-animation: cssload-sequence2 1.15s ease infinite 0.12s;
		-webkit-animation: cssload-sequence2 1.15s ease infinite 0.12s;
		-moz-animation: cssload-sequence2 1.15s ease infinite 0.12s;
}
#cssload-loader li:nth-child(8) {
	left: 101px;
	animation: cssload-sequence2 1.15s ease infinite 0.23s;
		-o-animation: cssload-sequence2 1.15s ease infinite 0.23s;
		-ms-animation: cssload-sequence2 1.15s ease infinite 0.23s;
		-webkit-animation: cssload-sequence2 1.15s ease infinite 0.23s;
		-moz-animation: cssload-sequence2 1.15s ease infinite 0.23s;
}
#cssload-loader li:nth-child(9) {
	left: 115px;
	animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
		-o-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
		-ms-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
		-webkit-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
		-moz-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
}
#cssload-loader li:nth-child(10) {
	left: 129px;
	animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
		-o-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
		-ms-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
		-webkit-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
		-moz-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
}
@keyframes cssload-sequence1 {
	0% {
		height: 10px;
	}
	50% {
		height: 49px;
	}
	100% {
		height: 10px;
	}
}

@-o-keyframes cssload-sequence1 {
	0% {
		height: 10px;
	}
	50% {
		height: 49px;
	}
	100% {
		height: 10px;
	}
}

@-ms-keyframes cssload-sequence1 {
	0% {
		height: 10px;
	}
	50% {
		height: 49px;
	}
	100% {
		height: 10px;
	}
}

@-webkit-keyframes cssload-sequence1 {
	0% {
		height: 10px;
	}
	50% {
		height: 49px;
	}
	100% {
		height: 10px;
	}
}

@-moz-keyframes cssload-sequence1 {
	0% {
		height: 10px;
	}
	50% {
		height: 49px;
	}
	100% {
		height: 10px;
	}
}

@keyframes cssload-sequence2 {
	0% {
		height: 19px;
	}
	50% {
		height: 63px;
	}
	100% {
		height: 19px;
	}
}

@-o-keyframes cssload-sequence2 {
	0% {
		height: 19px;
	}
	50% {
		height: 63px;
	}
	100% {
		height: 19px;
	}
}

@-ms-keyframes cssload-sequence2 {
	0% {
		height: 19px;
	}
	50% {
		height: 63px;
	}
	100% {
		height: 19px;
	}
}

@-webkit-keyframes cssload-sequence2 {
	0% {
		height: 19px;
	}
	50% {
		height: 63px;
	}
	100% {
		height: 19px;
	}
}

@-moz-keyframes cssload-sequence2 {
	0% {
		height: 19px;
	}
	50% {
		height: 63px;
	}
	100% {
		height: 19px;
	}
}
<body style="padding:100px;">
    <div id="cssload-loader" style="margin: 0 auto;">
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
</body>
Post Views: 2

Related posts