.preloader {
  position: fixed;
  top: 0;
  left: 0;
  visibility: visible;
  opacity: 1;
  z-index: 1001;
  background: #fff;
  width: 100%;
  height: 100%;
  text-align: center;
}

.loaded .preloader {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

.spinner {
  position: relative;
  top: 50%;
  -webkit-transform: translate(0,-50%);
  transform: translate(0,-50%);
  display: inline-block;
  background: rgb(20, 20, 20);
  width: 12px;
  height: 12px;
  margin: 0 auto;
  border-radius: 12px;
  animation: spinner 0.65s ease-in-out infinite;
  -webkit-animation: spinner 0.65s ease-in-out infinite;
}

.spinner::before, 
.spinner::after {
  content: '';
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  background: rgb(20, 20, 20);
  border-radius: 12px;
}

.spinner:before {
  left: -24px;
}

.spinner:after {
  left: 24px;
}

@keyframes spinner {
    0%{transform:rotate(0deg);}
    50%{transform:rotate(180deg);}
    100%{transform:rotate(180deg);}
}

@-webkit-keyframes spinner {
    0%{-webkit-transform:rotate(0deg);}
    50%{-webkit-transform:rotate(180deg);}
    100%{-webkit-transform:rotate(180deg);}
}