Cacher is the code snippet organizer for pro developers

.spinner--container{
  width: 56px;
  height: 56px;
  /* just for placement on the document  */
  margin: 100px auto;
  position: relative;
  /*background-color: #000*/
}

.spinner-fill {
  /* the circle in the middle  */
  width: 54px;
  height: 54px;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 100%;
  animation: spinner-fill-scaleout 0.8s infinite ease-in-out;
}

.spinner-line{
  /* the expanding border  */
  width: 56px;
  height: 56px;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0px;
  border-radius: 100%;  
  animation: spinner-line-scaleout 0.4s infinite ease-in-out;
}



@keyframes spinner-fill-scaleout {
  0% { 
    transform: scale(0);
    background-color: #114958;
  } 
  100% {
    transform: scale(1.0);
    background-color: #1E7E98;
    opacity: 0;
  }
}

@keyframes spinner-line-scaleout {
  0% { 
    transform: scale(0);
    border: 1px solid #820068;
    opacity: 1;
  } 
  100% {
    transform: scale(1.1);
    border: 2px solid #3AB7D8;
    opacity: 0;
  }
}

<div class="spinner--container">
  <div class="spinner-fill">
  </div>
  <div class="spinner-line">
  </div>
</div>