@keyframes spinnerblue {
  to {transform: rotate(360deg);}
}
 
.spinnerblue:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  border: 7px solid #ccc;
  border-top-color: #07d;
  animation: spinnerblue .6s linear infinite;
}

@keyframes spinnerorange {
  to {transform: rotate(360deg);}
}
 
.spinnerorange:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  border: 7px solid #ccc;
  border-top-color: #F1C40F;
  animation: spinnerorange .6s linear infinite;
}

@keyframes spinnerpink {
  to {transform: rotate(360deg);}
}
 
.spinnerpink:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  border: 7px solid #ccc;
  border-top-color: #E74C3C;
  animation: spinnerpink .6s linear infinite;
}

@keyframes spinnerpinkx {
  to {transform: rotate(360deg);}
}

.spinnerpinkx:before {
  content: '';
  box-sizing: border-box;
  position: relative;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  border: 7px solid #ccc;
  border-top-color: #E74C3C;
  animation: spinnerpink .6s linear infinite;
}


/*  $('#mySpinner').addClass('spinner');
$('#mySpinner').removeClass('spinner');*/

.loader {
  animation:spin 1s infinite linear;
  border:solid 1vmin transparent;
  border-radius:50%;
  border-right-color:#DC143C;
  border-top-color:#DC143C;
  box-sizing:border-box;
  height:10vmin;
  left:calc(50% - 10vmin);
  position:fixed;
  top:calc(50% - 10vmin);
  width:10vmin;
  z-index:1;
  &:before {
    animation:spin 2s infinite linear;
    border:solid 1vmin transparent;
    border-radius:50%;
    border-right-color:#DC143C;
    border-top-color:#DC143C;
    box-sizing:border-box;
    content:"";
    height:8vmin;
    left:0;
    position:absolute;
    top:0;
    width:8vmin;
  }
  &:after {
    animation:spin 3s infinite linear;
    border:solid 1vmin transparent;
    border-radius:50%;
    border-right-color:#DC143C;
    border-top-color:#DC143C;
    box-sizing:border-box;
    content:"";
    height:16vmin;
    left:2vmin;
    position:absolute;
    top:2vmin;
    width:6vmin;
  }
}

@keyframes spin {
  100% {
    transform:rotate(360deg);
  }
}