CodePen Embed - Effect Preloading 4

<div class="cssload-loader"></div>

.cssload-loader {
	position: relative;
	width: 2.5em;
	height: 2.5em;
	transform: rotate(165deg);
	display: block;
	margin: auto;
}
.cssload-loader:before, .cssload-loader:after {
	content: "";
	position: absolute;
	display: block;
	width: 0.5em;
	height: 0.5em;
	border-radius: 0.25em;
	transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
}
.cssload-loader:before {
	animation: before 2.3s infinite;
		-o-animation: before 2.3s infinite;
		-ms-animation: before 2.3s infinite;
		-webkit-animation: before 2.3s infinite;
		-moz-animation: before 2.3s infinite;
}
.cssload-loader:after {
	animation: after 2.3s infinite;
		-o-animation: after 2.3s infinite;
		-ms-animation: after 2.3s infinite;
		-webkit-animation: after 2.3s infinite;
		-moz-animation: after 2.3s infinite;
}




@keyframes before {
	0% {
		width: 0.5em;
		box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
	}
	35% {
		width: 2.5em;
		box-shadow: 0 -0.5em rgba(225,20,98,0.75), 0 0.5em rgba(111,202,220,0.75);
	}
	70% {
		width: 0.5em;
		box-shadow: -1em -0.5em rgba(225,20,98,0.75), 1em 0.5em rgba(111,202,220,0.75);
	}
	100% {
		box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
	}
}

@-o-keyframes before {
	0% {
		width: 0.5em;
		box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
	}
	35% {
		width: 2.5em;
		box-shadow: 0 -0.5em rgba(225,20,98,0.75), 0 0.5em rgba(111,202,220,0.75);
	}
	70% {
		width: 0.5em;
		box-shadow: -1em -0.5em rgba(225,20,98,0.75), 1em 0.5em rgba(111,202,220,0.75);
	}
	100% {
		box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
	}
}

@-ms-keyframes before {
	0% {
		width: 0.5em;
		box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
	}
	35% {
		width: 2.5em;
		box-shadow: 0 -0.5em rgba(225,20,98,0.75), 0 0.5em rgba(111,202,220,0.75);
	}
	70% {
		width: 0.5em;
		box-shadow: -1em -0.5em rgba(225,20,98,0.75), 1em 0.5em rgba(111,202,220,0.75);
	}
	100% {
		box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
	}
}

@-webkit-keyframes before {
	0% {
		width: 0.5em;
		box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
	}
	35% {
		width: 2.5em;
		box-shadow: 0 -0.5em rgba(225,20,98,0.75), 0 0.5em rgba(111,202,220,0.75);
	}
	70% {
		width: 0.5em;
		box-shadow: -1em -0.5em rgba(225,20,98,0.75), 1em 0.5em rgba(111,202,220,0.75);
	}
	100% {
		box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
	}
}

@-moz-keyframes before {
	0% {
		width: 0.5em;
		box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
	}
	35% {
		width: 2.5em;
		box-shadow: 0 -0.5em rgba(225,20,98,0.75), 0 0.5em rgba(111,202,220,0.75);
	}
	70% {
		width: 0.5em;
		box-shadow: -1em -0.5em rgba(225,20,98,0.75), 1em 0.5em rgba(111,202,220,0.75);
	}
	100% {
		box-shadow: 1em -0.5em rgba(225,20,98,0.75), -1em 0.5em rgba(111,202,220,0.75);
	}
}

@keyframes after {
	0% {
		height: 0.5em;
		box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
	}
	35% {
		height: 2.5em;
		box-shadow: 0.5em 0 rgba(61,184,143,0.75), -0.5em 0 rgba(233,169,32,0.75);
	}
	70% {
		height: 0.5em;
		box-shadow: 0.5em -1em rgba(61,184,143,0.75), -0.5em 1em rgba(233,169,32,0.75);
	}
	100% {
		box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
	}
}

@-o-keyframes after {
	0% {
		height: 0.5em;
		box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
	}
	35% {
		height: 2.5em;
		box-shadow: 0.5em 0 rgba(61,184,143,0.75), -0.5em 0 rgba(233,169,32,0.75);
	}
	70% {
		height: 0.5em;
		box-shadow: 0.5em -1em rgba(61,184,143,0.75), -0.5em 1em rgba(233,169,32,0.75);
	}
	100% {
		box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
	}
}

@-ms-keyframes after {
	0% {
		height: 0.5em;
		box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
	}
	35% {
		height: 2.5em;
		box-shadow: 0.5em 0 rgba(61,184,143,0.75), -0.5em 0 rgba(233,169,32,0.75);
	}
	70% {
		height: 0.5em;
		box-shadow: 0.5em -1em rgba(61,184,143,0.75), -0.5em 1em rgba(233,169,32,0.75);
	}
	100% {
		box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
	}
}

@-webkit-keyframes after {
	0% {
		height: 0.5em;
		box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
	}
	35% {
		height: 2.5em;
		box-shadow: 0.5em 0 rgba(61,184,143,0.75), -0.5em 0 rgba(233,169,32,0.75);
	}
	70% {
		height: 0.5em;
		box-shadow: 0.5em -1em rgba(61,184,143,0.75), -0.5em 1em rgba(233,169,32,0.75);
	}
	100% {
		box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
	}
}

@-moz-keyframes after {
	0% {
		height: 0.5em;
		box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
	}
	35% {
		height: 2.5em;
		box-shadow: 0.5em 0 rgba(61,184,143,0.75), -0.5em 0 rgba(233,169,32,0.75);
	}
	70% {
		height: 0.5em;
		box-shadow: 0.5em -1em rgba(61,184,143,0.75), -0.5em 1em rgba(233,169,32,0.75);
	}
	100% {
		box-shadow: 0.5em 1em rgba(61,184,143,0.75), -0.5em -1em rgba(233,169,32,0.75);
	}
}

This Pen is owned by suprianto sa on CodePen.

See more by @supriantosa on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.