.loading {
    position: absolute;
    margin: auto;
    width: 0;
    height: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-animation: spin 4s infinite;
            animation: spin 4s infinite;
  }
  .loading > .tooth {
    display: inline-block;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
    position: absolute;
    float: left;
    width: 2em;
    height: 2em;
    left: -1em;
    top: -1em;
    background: #666;
  }
  .loading > .center {
    display: inline-block;
    position: absolute;
    background: #E7DCDB;
    left: -4.5em;
    top: -4.5em;
    width: 9em;
    height: 9em;
    border-radius: 50%;
    text-align: center;
  }
  .loading > .center:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: calc(50% - 2.7777777778em);
    right: calc(50% - 2.7777777778em);
    width: 5.5555555556em;
    height: 5.5555555556em;
    border-radius: 50%;
    background: #666;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
    -webkit-animation: throb 1s infinite ease-in;
            animation: throb 1s infinite ease-in;
  }
  
  .loading > .tooth:nth-of-type(1) {
    transform: rotate(0deg) translate(5em);
  }
  .loading > .tooth:nth-of-type(2) {
    transform: rotate(45deg) translate(5em);
  }
  .loading > .tooth:nth-of-type(3) {
    transform: rotate(90deg) translate(5em);
  }
  .loading > .tooth:nth-of-type(4) {
    transform: rotate(135deg) translate(5em);
  }
  .loading > .tooth:nth-of-type(5) {
    transform: rotate(180deg) translate(5em);
  }
  .loading > .tooth:nth-of-type(6) {
    transform: rotate(225deg) translate(5em);
  }
  .loading > .tooth:nth-of-type(7) {
    transform: rotate(270deg) translate(5em);
  }
  .loading > .tooth:nth-of-type(8) {
    transform: rotate(315deg) translate(5em);
  }
  
  @-webkit-keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(90deg);
    }
    50% {
      transform: rotate(180deg);
    }
    75% {
      transform: rotate(270deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(90deg);
    }
    50% {
      transform: rotate(180deg);
    }
    75% {
      transform: rotate(270deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes throb {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.075);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes throb {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.075);
    }
    100% {
      transform: scale(1);
    }
  }

  /* ############################## */

  #cover-spin {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(255,255,255,0.7);
    z-index:9999;
    display:none;
}
#cover-spinextract {
  position:fixed;
  width:100%;
  left:0;right:0;top:0;bottom:0;
  background-color: rgba(255,255,255,0.7);
  z-index:9999;
  display:none;
}
@-webkit-keyframes spin {
	from {-webkit-transform:rotate(0deg);}
	to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

#cover-spin::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:40px;height:40px;
    border-style:solid;
    border-color:black;
    border-top-color:transparent;
    border-width: 4px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}
#cover-spinextract::after {
  content:'';
  display:block;
  position:absolute;
  left:48%;top:40%;
  width:40px;height:40px;
  border-style:solid;
  border-color:black;
  border-top-color:transparent;
  border-width: 4px;
  border-radius:50%;
  -webkit-animation: spin .8s linear infinite;
  animation: spin .8s linear infinite;
}