Loader

<div class="wavebox">
  <div class="box">
    <div class="wave">
      <div class="text">LOADING</div>
    </div>
  </div>
  <div class="base"></div>
</div>
//Автор: Nikolay Talanov. @suez

body {
  margin: 5em auto 0 auto;
  text-align: center;
  font: normal 100% Arial;
}

.wavebox {
  width: 19em;
  height: 7em;
  position: relative;
  padding: 2em 1em 0 1em;
  display: inline-block;
}

.box {
  position: relative;
  overflow: hidden;
  width: 15em;
  height: 5em;
  border-left: 2em solid #00308e;
  border-right: 2em solid #00308e;
  box-shadow: 0 0 2px 1px black;
  transform-origin: bottom center;
  -webkit-animation: animbox 5s ease-in-out infinite;
          animation: animbox 5s ease-in-out infinite;
  border-radius: 0.2em;
}

.wave {
  background: #00ABED;
  position: absolute;
  bottom: -3.5em;
  left: -2em;
  width: 19em;
  height: 6em;
  box-shadow: inset 2px 15px 25px rgba(255, 255, 255, 0.3);
  animation: animbox 5s -2.5s ease-in-out infinite reverse;
}

.text {
  position: absolute;
  top: -0.5em;
  -webkit-animation: animtext 5s -2.5s ease-in-out infinite;
          animation: animtext 5s -2.5s ease-in-out infinite;
  font: bold 1em/1.2 Arial;
  opacity: 0.8;
}

.base {
  position: relative;
  width: 3em;
  height: 2em;
  background-image: radial-gradient(ellipse at center, #d4e4ef 0%, #86aecc 100%);
  border: 1px solid #5C788C;
  border-radius: 50% 50% 0 0;
  left: 8em;
}

.base:before {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #86aecc;
  background-image: linear-gradient(to bottom, #86aecc 0%, rgba(212, 228, 239, 0.8) 100%);
  top: -0.4em;
  left: 1em;
  border-top: 2px solid #5C788C;
}

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

@keyframes animbox {
  0% {
    transform: rotate(12deg);
  }
  50% {
    transform: rotate(-12deg);
  }
  100% {
    transform: rotate(12deg);
  }
}
@-webkit-keyframes animtext {
  0% {
    top: -0.5em;
    left: 4em;
  }
  20% {
    top: -0.3em;
  }
  40% {
    top: -0.5em;
  }
  50% {
    top: -0.3em;
    left: 11em;
  }
  60% {
    top: -0.5em;
  }
  80% {
    top: -0.3em;
  }
  100% {
    top: -0.5em;
    left: 4em;
  }
}
@keyframes animtext {
  0% {
    top: -0.5em;
    left: 4em;
  }
  20% {
    top: -0.3em;
  }
  40% {
    top: -0.5em;
  }
  50% {
    top: -0.3em;
    left: 11em;
  }
  60% {
    top: -0.5em;
  }
  80% {
    top: -0.3em;
  }
  100% {
    top: -0.5em;
    left: 4em;
  }
}