<!--
Inspired by the following people/pens:
1. Andrew Philpott https://codepen.io/andrewlphilpott/pen/cHxKE

2. Niels Oeltjen
https://codepen.io/Elbone/pen/sezjI
-->
<div class="spinner"><div></div></div>
body {
  background-color: #595551;
}

@-webkit-keyframes spinner {
  0%   { -webkit-transform: rotate(0deg); }
  15%  { -webkit-transform: rotate(0deg); }
  21%  { -webkit-transform: rotate(90deg); }
	36%  { -webkit-transform: rotate(90deg); }
	42%  { -webkit-transform: rotate(180deg); }
	57%  { -webkit-transform: rotate(180deg); }
	63%  { -webkit-transform: rotate(270deg); }
	78%  { -webkit-transform: rotate(270deg); }
	84%  { -webkit-transform: rotate(360deg); }
	100% { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spinner {
	0%   { -moz-transform: rotate(0deg); }
	15%  { -moz-transform: rotate(0deg); }
	21%  { -moz-transform: rotate(90deg); }
	36%  { -moz-transform: rotate(90deg); }
	42%  { -moz-transform: rotate(180deg); }
	57%  { -moz-transform: rotate(180deg); }
	63%  { -moz-transform: rotate(270deg); }
	78%  { -moz-transform: rotate(270deg); }
	84%  { -moz-transform: rotate(360deg); }
	100% { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spinner {
	0%   { -ms-transform: rotate(0deg); }
	15%  { -ms-transform: rotate(0deg); }
	21%  { -ms-transform: rotate(90deg); }
	36%  { -ms-transform: rotate(90deg); }
	42%  { -ms-transform: rotate(180deg); }
	57%  { -ms-transform: rotate(180deg); }
	63%  { -ms-transform: rotate(270deg); }
	78%  { -ms-transform: rotate(270deg); }
	84%  { -ms-transform: rotate(360deg); }
	100% { -ms-transform: rotate(360deg); }
}

@keyframes spinner {
	0%   { transform: rotate(0deg); }
	15%  { transform: rotate(0deg); }
	21%  { transform: rotate(90deg); }
	36%  { transform: rotate(90deg); }
	42%  { transform: rotate(180deg); }
	57%  { transform: rotate(180deg); }
	63%  { transform: rotate(270deg); }
	78%  { transform: rotate(270deg); }
	84%  { transform: rotate(360deg); }
	100% { transform: rotate(360deg); }
}
	
.spinner {
	box-sizing: border-box;
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: rgba(255, 255, 255, 0.75);
  margin: -34px 0 0 -34px;
	padding: 6px;

	-webkit-border-radius: 50% 50% 0 50%;
	-webkit-background-clip: padding-box;
	-moz-border-radius: 50% 50% 0 50%;
	-moz-background-clip: padding;
	border-radius: 50% 50% 0 50%;
	background-clip: padding-box;
	
	-webkit-box-shadow: 0 0 14px rgba(0, 0, 0, .8);
	-moz-box-shadow: 0 0 14px rgba(0,0,0,.8);
	box-shadow: 0 0 14px rgba(0, 0, 0, .8);
}

.spinner div {
	box-sizing: border-box;
	width: 68px;
	height: 68px;
	border-top: 16px #218DA6 solid;
	border-right: 16px #595551 solid;
	border-bottom: 16px #FF9719 solid;
	border-left: 16px #A0CC00 solid;
	padding: 6px;
	background-color: #fff;
	
	-webkit-border-radius: 50%;
	-webkit-background-clip: content-box;
	-moz-border-radius: 50%;
	-moz-background-clip: content;
	border-radius: 50%;
	background-clip: content-box;
	
	-webkit-animation: spinner 4s cubic-bezier(0.680,-0.550,0.265,2.550) infinite;
	-moz-animation: spinner 4s cubic-bezier(0.680,-0.550,0.265,2.550) infinite;
	-o-animation: spinner 4s cubic-bezier(0.680,-0.550,0.265,2.550) infinite;
	-ms-animation: spinner 4s cubic-bezier(0.680,-0.550,0.265,2.550) infinite;
	animation: spinner 4s cubic-bezier(0.680,-0.550,0.265,2.550) infinite;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.