Google Alike Pure CSS Loading Spinner

Preview:

Description:

A pure CSS loading spinner that makes use of CSS3 animations to flip Html elements with different colors as you seen in Google plus. Created by Daniel Cotton

How to use it:

Create the Html for a loading spinner as follows.

<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>

The core  CSS styles for the loading spinner.

.spinner,
.spinnerlarge,
.spinnermedium {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -300px;
  right: 0;
  margin: auto;
  background-color: #C00;
  border-radius: 50%;
  overflow: hidden;
}

.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;
}

3. The required CSS3 animation rules for the loading spinner.

@-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;
}
}