#wp-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  background-size: 128px 128px;
  z-index: 999999;
  width: 100%;
  height: 100%; }
  #wp-preloader .preloader-container {
    width: 80px;
    height: 40px;
    margin: 100px auto;
    margin-top: calc(100vh / 2 - 20px); }
    #wp-preloader .preloader-container .block {
      position: relative;
      box-sizing: border-box;
      float: left;
      margin: 0 10px 10px 0;
      width: 12px;
      height: 12px;
      border-radius: 100%;
      background: #ed499a; }
    #wp-preloader .preloader-container .block:nth-child(4n+1) {
      -webkit-animation: wave 2s ease .0s infinite;
           -o-animation: wave 2s ease .0s infinite;
              animation: wave 2s ease .0s infinite; }
    #wp-preloader .preloader-container .block:nth-child(4n+2) {
      -webkit-animation: wave 2s ease .2s infinite;
           -o-animation: wave 2s ease .2s infinite;
              animation: wave 2s ease .2s infinite; }
    #wp-preloader .preloader-container .block:nth-child(4n+3) {
      -webkit-animation: wave 2s ease .4s infinite;
           -o-animation: wave 2s ease .4s infinite;
              animation: wave 2s ease .4s infinite; }
    #wp-preloader .preloader-container .block:nth-child(4n+4) {
      -webkit-animation: wave 2s ease .6s infinite;
           -o-animation: wave 2s ease .6s infinite;
              animation: wave 2s ease .6s infinite;
      margin-right: 0; }

@-webkit-keyframes wave {
  0% {
    top: 0;
    opacity: 1; }
  50% {
    top: 30px;
    opacity: .2; }
  100% {
    top: 0;
    opacity: 1; } }

@-o-keyframes wave {
  0% {
    top: 0;
    opacity: 1; }
  50% {
    top: 30px;
    opacity: .2; }
  100% {
    top: 0;
    opacity: 1; } }

@keyframes wave {
  0% {
    top: 0;
    opacity: 1; }
  50% {
    top: 30px;
    opacity: .2; }
  100% {
    top: 0;
    opacity: 1; } }