.loader{
  height:100%;
  width:100%;
  background:#d13636;;
  z-index:999;
  position:fixed;

opacity:1;
visibility:visible;
}
.done{
  opacity:0;
  visibility:hidden;
  -webkit-transition: all 1s ease-in-out,height 1.1s ease-in-out;
  -moz-transition: all 1s ease-in-out,height 1.1s ease-in-out;
  -ms-transition: all 1s ease-in-out,height 1.1s ease-in-out;
  -o-transition: all 1s ease-in-out,height 1.1s ease-in-out;
  transition: all 1s ease-in-out,height 1.1s ease-in-out;
}
.spinner,.spinner:before, .spinner:after{
  border-radius: 140px;
  border:6px solid transparent;

}

.spinner{
  position: relative;
  left: 50%;
  top: 50%;
  margin-top:-100px;
  margin-left:-100px;
  height: 200px;
  width: 200px;
  border-top-color:#88D180;
  border-bottom-color:#88D180;
  border-left-color:#88D180;
  border-right-color:#88D180;
}



.spinner:before, .spinner:after{
 content: '';
}

.spinner:before{
  position: absolute;
  left: 15px;
  right: 15px;
  top: 15px;
  bottom: 15px;
  border-top-color:#6F78DC;
  border-bottom-color:#6F78DC;
  -webkit-animation:spin 1s infinite linear;
  animation:back_spin 1s infinite linear;

}

.spinner:after{
  position: absolute;
  left: 40px;
  right: 40px;
  top: 40px;
  bottom: 40px;
  border-top-color:#FBF551;
  border-bottom-color:#FBF551;
  -webkit-animation:spin 10s infinite linear;
  animation:spin 3s infinite linear;
}

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


@-webkit-keyframes back_spin{
  from{
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@keyframes back_spin{
  from{
    -webkit-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  to {
    -webkit-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
    transform:rotate(-360deg);
  }
}