<div id="loading"></div>
/* Animation */
@-webkit-keyframes loading {
  to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes loading {
	to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes loading {
	to { -ms-transform: rotate(360deg); }
}
@keyframes loading {
	to { transform: rotate(360deg); }
}

/* Loader (*/
#loading {

	width: 40px;
	height: 40px;
	border-radius: 50%;
	
	background-image: linear-gradient(bottom, #FFFFFF 50%, #00FFFF 50%);
	background-image: -o-linear-gradient(bottom, #FFFFFF 50%, #00FFFF 50%);
	background-image: -moz-linear-gradient(bottom, #FFFFFF 50%, #00FFFF 50%);
	background-image: -webkit-linear-gradient(bottom, #FFFFFF 50%, #00FFFF 50%);
	background-image: -ms-linear-gradient(bottom, #FFFFFF 50%, #00FFFF 50%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.5, #FFFFFF),
		color-stop(0.5, #00FFFF)
	);
	
	-webkit-animation: loading 1s infinite linear;
	-moz-animation: loading 1s infinite linear;
	-ms-animation: loading 1s infinite linear;
	animation: loading 1s infinite linear;
	
}

/* Just page styling */
body{
	background: #191919;
}
div {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -20px 0 0 -20px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js