Edit on
<h1> Google Style Loading Spinner - CSS</h1>
<span> Simply change Width and Height of CSS to suit! -  By <a href="https://www.daniel-cotton.co.uk/">Daniel Cotton </a></span>

<!-- Spinner -->
<div class="spinner">
    <span class="bgtopl"><span class="highlighttopl"></span></span>
    <span class="bgtopr"><span class="highlighttopr"></span></span>
    <span class="bottomrow">
        <span class="bgbtml"><span class="highlightbtml"></span></span>
        <span class="bgbtmr"><span class="highlightbtmr"></span></span>
    </span>
</div>

<!-- Additional Spinners for DEMO -->
<div class="spinnermedium">
    <span class="bgtopl"><span class="highlighttopl"></span></span>
    <span class="bgtopr"><span class="highlighttopr"></span></span>
    <span class="bottomrow">
        <span class="bgbtml"><span class="highlightbtml"></span></span>
        <span class="bgbtmr"><span class="highlightbtmr"></span></span>
    </span>
</div>
/* Additional styling */	
@import url(https://fonts.googleapis.com/css?family=Lato:100);

  *{
		border:none;
		margin:0;
		padding:0;
	}
  body{
		background-color:#333;
     font-family:'Lato', sans-serif;
	}
  h1, span, a{
    color:#fff;
  }

/* Useful stuff only below! */

	.spinner, .spinnerlarge, .spinnermedium{
		position: absolute;
		top:0;
		bottom: 0;
		left: -300px;
		right: 0;
		margin: auto;
		background-color:#C00;
		border-radius:50%;
		overflow:hidden;
	}
	.spinnermedium{
		left: 50px;
		height:100px; /* Just change W&H */
		width:100px;
	}
	.spinner{
		height:50px; /* Just change W&H */
		width:50px;
	}
	.highlighttopl{
		position:absolute;
		bottom:0;
		right:0;
		display:block;
		background-color:#900;
		height:50%;
		border-radius:100% 0 0 0;
		width:50%;
		animation:highlighttl 3s linear infinite;
		-webkit-animation: highlighttl 3s linear infinite; /* Chrome, Safari, Opera */
	}
	.highlighttopr{
		position:absolute;
		bottom:0;
		left:0;
		display:block;
		background-color:#900;
		height:50%;
		border-radius:0 100% 0 0;
		width:50%;
		animation:highlighttr 3s linear infinite;
		-webkit-animation: highlighttr 3s linear infinite; /* Chrome, Safari, Opera */
	}
	.highlightbtml{
		position:absolute;
		top:0;
		right:0;
		display:block;
		background-color:#000;
		height:0%;
		border-radius:0 0 0 100%;
		width:50%;
		animation:highlightbl 3s linear infinite;
		-webkit-animation: highlightbl 3s linear infinite; /* Chrome, Safari, Opera */
	}
	.highlightbtmr{
		position:absolute;
		top:0;
		left:0;
		display:block;
		background-color:#000;
		height:0%;
		border-radius:0 0 100% 0;
		width:50%;
		animation:highlightbr 3s linear infinite;
		-webkit-animation: highlightbr 3s linear infinite; /* Chrome, Safari, Opera */
	}
	.bgtopl{
		position:relative;
		display:block;
		float:left;
		background-color:#C00;
		opacity:1;
		height:50%;
		width:50%;
		animation:bgtl 3s linear infinite;
		-webkit-animation: bgtl 3s linear infinite; /* Chrome, Safari, Opera */
	}
	.bgtopr{
		position:relative;
		display:block;
		float:left;
		background-color:#C00;
		opacity:1;
		height:50%;
		width:50%;
		animation:bgtr 3s linear infinite;
		-webkit-animation: bgtr 3s linear infinite; /* Chrome, Safari, Opera */
	}
	.bgbtml{
		display:block;
		position:relative;
		background-color:#3c7af4;
		opacity:1;
		float:left;
		height:50%;
		width:50%;
		animation:bgbl 3s linear infinite;
		-webkit-animation: bgbl 3s linear infinite; /* Chrome, Safari, Opera */
	}
	.bgbtmr{
		display:block;
		position:relative;
		background-color:#3c7af4;
		float:left;
		opacity:1;
		height:50%;
		width:50%;
		animation:bgbr 3s linear infinite;
		-webkit-animation: bgbr 3s linear infinite; /* Chrome, Safari, Opera */
	}
	.bottomrow{
		padding:0;
		width:100%;
		margin:0;
		height:100%;
		clear:both;
	}
	
	/* ANIMATIONS - HIGHLIGHTS TOP */
	
	/* Chrome, Safari, Opera */
	@-webkit-keyframes highlighttr {
		0%   {
			height:100%;
			width:100%;
			background-color:#3c7af4;
		}
		14%  {
			height:0%;
			width:100%;
			background-color:#00F;
		}
		15%  {
			height:0%;
			width:100%;
			background-color:#C00;
		}
		19%  {
			height:100%;
			width:100%;
			background-color:#C00;
		}
		25%  {
			height:100%;
			width:100%;
			background-color:#C00;
		}
		37%  {
			height:100%;
			width:0%;
			background-color:#900;
		}
		59%  {
			height:100%;
			width:0%;
			background-color:#900;
		}
		60%  {
			height:100%;
			width:0%;
			background-color:#fcd64c;
		}
		61%  {
			height:0%;
			width:100%;
			background-color:#fcd64c;
		}
		62%  {
			height:0%;
			width:100%;
			background-color:#1c9254;
		}
		75% {
			height:100%;
			width:100%;
			background-color:#24ae64;
		}
		86% {
			height:100%;
			width:0%;
			background-color:#24ae64;
		}
		87% {
			height:100%;
			width:0%;
			background-color:#00F;
		}
		100% {
			height:100%;
			width:100%;
			background-color:#3c7af4;
		}
	}
	
	/* Standard syntax */
	@keyframes highlighttr {
		0%   {
			height:100%;
			width:100%;
			background-color:#3c7af4;
		}
		14%  {
			height:0%;
			width:100%;
			background-color:#00F;
		}
		15%  {
			height:0%;
			width:100%;
			background-color:#C00;
		}
		19%  {
			height:100%;
			width:100%;
			background-color:#C00;
		}
		25%  {
			height:100%;
			width:100%;
			background-color:#C00;
		}
		37%  {
			height:100%;
			width:0%;
			background-color:#900;
		}
		59%  {
			height:100%;
			width:0%;
			background-color:#900;
		}
		60%  {
			height:100%;
			width:0%;
			background-color:#fcd64c;
		}
		61%  {
			height:0%;
			width:100%;
			background-color:#fcd64c;
		}
		62%  {
			height:0%;
			width:100%;
			background-color:#1c9254;
		}
		75% {
			height:100%;
			width:100%;
			background-color:#24ae64;
		}
		86% {
			height:100%;
			width:0%;
			background-color:#24ae64;
		}
		87% {
			height:100%;
			width:0%;
			background-color:#00F;
		}
		100% {
			height:100%;
			width:100%;
			background-color:#3c7af4;
		}
	}
	
	
	
	/* Chrome, Safari, Opera */
	@-webkit-keyframes highlighttl {
		0%   {
			height:100%;
			width:100%;
			background-color:#3c7af4;
		}
		14%  {
			height:0%;
			width:100%;
			background-color:#00F;
		}
		16%  {
			height:0%;
			width:100%;
			background-color:#C00;
		}
		36%  {
			height:100%;
			width:0%;
			background-color:#C00;
		}
		37%  {
			height:100%;
			width:0%;
			background-color:#fcde6c;
		}
		50%  {
			height:100%;
			width:100%;
			background-color:#fcd64c;
		}
		61%  {
			height:0%;
			width:100%;
			background-color:#fcd64c;
		}
		62%  {
			height:0%;
			width:100%;
			background-color:#1c9254;
		}
		75% {
			height:100%;
			width:100%;
			background-color:#24ae64;
		}
		87% {
			height:100%;
			width:0%;
			background-color:#1c9654;
		}
		100% {
			height:100%;
			width:0%;
			background-color:#1c9654;
		}
	}
	
	/* Standard syntax */
	@keyframes highlighttl {
		0%   {
			height:100%;
			width:100%;
			background-color:#3c7af4;
		}
		14%  {
			height:0%;
			width:100%;
			background-color:#00F;
		}
		16%  {
			height:0%;
			width:100%;
			background-color:#C00;
		}
		36%  {
			height:100%;
			width:0%;
			background-color:#C00;
		}
		37%  {
			height:100%;
			width:0%;
			background-color:#fcde6c;
		}
		50%  {
			height:100%;
			width:100%;
			background-color:#fcd64c;
		}
		61%  {
			height:0%;
			width:100%;
			background-color:#fcd64c;
		}
		62%  {
			height:0%;
			width:100%;
			background-color:#1c9254;
		}
		75% {
			height:100%;
			width:100%;
			background-color:#24ae64;
		}
		87% {
			height:100%;
			width:0%;
			background-color:#1c9654;
		}
		100% {
			height:100%;
			width:0%;
			background-color:#1c9654;
		}
	}


	/* ANIMATIONS - HIGHLIGHTS BOTTOM */
	
	/* Chrome, Safari, Opera */
	@-webkit-keyframes highlightbr {
		13%   {
			height:0%;
			width:100%;
			background-color:#900;
		}
		24%  {
			height:100%;
			width:100%;
			background-color:#C00;
		}
		25%  {
			height:100%;
			width:100%;
			background-color:#C00;
		}
		37%  {
			height:100%;
			width:0%;
			background-color:#900;
		}
		49%  {
			height:100%;
			width:0%;
			background-color:#900;
		}
		50%  {
			height:100%;
			width:0%;
			background-color:#fcd64c;
		}
		51%  {
			height:100%;
			width:100%;
			background-color:#fcd64c;
		}
		62%  {
			height:0%;
			width:100%;
			background-color:#fcde6c;
		}
		63%  {
			height:0%;
			width:100%;
			background-color:#24ae64;
		}
		86% {
			height:100%;
			width:0%;
			background-color:#24ae64;
		}
		87% {
			height:100%;
			width:0%;
			background-color:#00F;
		}
		100% {
			height:100%;
			width:100%;
			background-color:#3c7af4;
		}
	}
	
	/* Standard syntax */
	@keyframes highlightbr {
		13%   {
			height:0%;
			width:100%;
			background-color:#900;
		}
		24%  {
			height:100%;
			width:100%;
			background-color:#C00;
		}
		25%  {
			height:100%;
			width:100%;
			background-color:#C00;
		}
		37%  {
			height:100%;
			width:0%;
			background-color:#900;
		}
		49%  {
			height:100%;
			width:0%;
			background-color:#900;
		}
		50%  {
			height:100%;
			width:0%;
			background-color:#fcd64c;
		}
		51%  {
			height:100%;
			width:100%;
			background-color:#fcd64c;
		}
		62%  {
			height:0%;
			width:100%;
			background-color:#fcde6c;
		}
		63%  {
			height:0%;
			width:100%;
			background-color:#24ae64;
		}
		86% {
			height:100%;
			width:0%;
			background-color:#24ae64;
		}
		87% {
			height:100%;
			width:0%;
			background-color:#00F;
		}
		100% {
			height:100%;
			width:100%;
			background-color:#3c7af4;
		}
	}
	
	
	
	/* Chrome, Safari, Opera */
	@-webkit-keyframes highlightbl {
		13%   {
			height:0%;
			width:100%;
			background-color:#900;
		}
		24%  {
			height:100%;
			width:100%;
			background-color:#C00;
		}
		25%  {
			height:100%;
			width:100%;
			background-color:#C00;
		}
		36%  {
			height:100%;
			width:0%;
			background-color:#C00;
		}
		37%  {
			height:100%;
			width:0%;
			background-color:#fcde6c;
		}
		50%  {
			height:100%;
			width:100%;
			background-color:#fcd64c;
		}
		51%  {
			height:100%;
			width:100%;
			background-color:#fcd64c;
		}
		62%  {
			height:0%;
			width:100%;
			background-color:#fcde6c;
		}
		63%  {
			height:0%;
			width:100%;
			background-color:#24ae64;
		}
		75%  {
			height:100%;
			width:100%;
			background-color:#24ae64;
		}
		87% {
			height:100%;
			width:0%;
			background-color:#1c9654;
		}
		100% {
			height:100%;
			width:0%;
			background-color:#1c9654;
		}
	}
	
	/* Standard syntax */
	@keyframes highlightbl {
		13%   {
			height:0%;
			width:100%;
			background-color:#900;
		}
		24%  {
			height:100%;
			width:100%;
			background-color:#C00;
		}
		25%  {
			height:100%;
			width:100%;
			background-color:#C00;
		}
		36%  {
			height:100%;
			width:0%;
			background-color:#C00;
		}
		37%  {
			height:100%;
			width:0%;
			background-color:#fcde6c;
		}
		50%  {
			height:100%;
			width:100%;
			background-color:#fcd64c;
		}
		51%  {
			height:100%;
			width:100%;
			background-color:#fcd64c;
		}
		62%  {
			height:0%;
			width:100%;
			background-color:#fcde6c;
		}
		63%  {
			height:0%;
			width:100%;
			background-color:#24ae64;
		}
		75%  {
			height:100%;
			width:100%;
			background-color:#24ae64;
		}
		87% {
			height:100%;
			width:0%;
			background-color:#1c9654;
		}
		100% {
			height:100%;
			width:0%;
			background-color:#1c9654;
		}
	}
	
	
	/* ANIMATIONS - BGS TOP */
	
	/* Chrome, Safari, Opera */
	@-webkit-keyframes bgtl {
		0%   {
			background-color:#C00;
		}
		25%  {
			background-color:#C00;
		}
		50%  {
			background-color:#C00;
		}
		51%  {
			background-color:#fcd64c;
		}
		74%  {
			background-color:#fcd64c;
		}
		75% {
			background-color:#1c9654;
		}
		76%  {
			background-color:#3c7af4;
		}
		100% {
			background-color:#3c7af4;
		}
	}
	
	/* Standard syntax */
	@keyframes bgtl {
		0%   {
			background-color:#C00;
		}
		25%  {
			background-color:#C00;
		}
		50%  {
			background-color:#C00;
		}
		51%  {
			background-color:#fcd64c;
		}
		74%  {
			background-color:#fcd64c;
		}
		75% {
			background-color:#1c9654;
		}
		76%  {
			background-color:#3c7af4;
		}
		100% {
			background-color:#3c7af4;
		}
	}
	
	
	
	/* Chrome, Safari, Opera */
	@-webkit-keyframes bgtr {
		0%   {
			background-color:#C00;
		}
		25%  {
			background-color:#C00;
		}
		26%  {
			background-color:#fcd64c;
		}
		51%  {
			background-color:#fcd64c;
		}
		75% {
			background-color:#fcd64c;
		}
		76% {
			background-color:#24ae64;
		}
		100% {
			background-color:#24ae64;
		}
	}
	
	/* Standard syntax */
	@keyframes bgtr {
		0%   {
			background-color:#C00;
		}
		25%  {
			background-color:#C00;
		}
		26%  {
			background-color:#fcd64c;
		}
		51%  {
			background-color:#fcd64c;
		}
		75% {
			background-color:#fcd64c;
		}
		76% {
			background-color:#24ae64;
		}
		100% {
			background-color:#24ae64;
		}
	}
	
	
	/* ANIMATIONS - BGS BOTTOM */
	
	/* Chrome, Safari, Opera */
	@-webkit-keyframes bgbl {
		0%   {
			background-color:#3c7af4;
		}
		25%  {
			background-color:#3c7af4;
		}
		26%  {
			background-color:#C00;
		}
		50%  {
			background-color:#C00;
		}
		51%  {
			background-color:#fcd64c;
		}
		52%  {
			background-color:#24ae64;
		}
		74%  {
			background-color:#24ae64;
		}
		75%  {
			background-color:#3c7af4;
		}
		100% {}
	}
	
	/* Standard syntax */
	@keyframes bgbl {
		0%   {
			background-color:#3c7af4;
		}
		25%  {
			background-color:#3c7af4;
		}
		26%  {
			background-color:#C00;
		}
		50%  {
			background-color:#C00;
		}
		51%  {
			background-color:#fcd64c;
		}
		52%  {
			background-color:#24ae64;
		}
		74%  {
			background-color:#24ae64;
		}
		75%  {
			background-color:#3c7af4;
		}
		100% {}
	}
	
	
	
	/* Chrome, Safari, Opera */
	@-webkit-keyframes bgbr {
		0%   {
			background-color:#3c7af4;
		}
		25%  {
			background-color:#3c7af4;
		}
		26%  {
			background-color:#fcd64c;
		}
		50%  {
			background-color:#fcd64c;
		}
		51%  {
			background-color:#fcd64c;
		}
		52%  {
			background-color:#24ae64;
		}
		75%  {
			background-color:#24ae64;
		}
		100% {
			background-color:#24ae64;
		}
	}
	
	/* Standard syntax */
	@keyframes bgbr {
		0%   {
			background-color:#3c7af4;
		}
		25%  {
			background-color:#3c7af4;
		}
		26%  {
			background-color:#fcd64c;
		}
		50%  {
			background-color:#fcd64c;
		}
		51%  {
			background-color:#fcd64c;
		}
		52%  {
			background-color:#24ae64;
		}
		75%  {
			background-color:#24ae64;
		}
		100% {
			background-color:#24ae64;
		}
	}
Rerun