<svg class="loading" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="574.558px" height="190px" viewBox="0 0 574.558 120" enable-background="new 0 0 574.558 120" xml:space="preserve">
  <defs>
    <pattern id="water" width=".25" height="1.1" patternContentUnits="objectBoundingBox">
      <path fill="#fff" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"/>
    </pattern>
    
    <text id="text" transform="matrix(1 0 0 1 -8.0684 116.7852)" font-size="161.047">LOADING</text>
    
    <mask id="text_mask">
      <use x="0" y="0" xlink:href="#text" opacity="1" fill="#3498db"/>
    </mask>
  </defs>
 
  <use x="0" y="0" xlink:href="#text" fill="#3498db"/>
  
  <rect class="water-fill" mask="url(#text_mask)" fill="url(#water)" x="-400" y="0" width="1600" height="120"/>
</svg>

@import 'https://fonts.googleapis.com/css?family=Oswald';


html, body {
  background: #005C97;
  background: linear-gradient(to left, #005C97 , #363795);
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 6px;
  overflow: hidden;
}

.water-fill {
  animation: wave 0.7s infinite linear, 
             fill-up 10s infinite ease-out alternate;
}

@keyframes wave {
  0% { x: -400px; }
  100% { x: 0; }
}


@keyframes fill-up {
  0% {
    height: 0;
    y: 130px;
  }
  100% {
    height: 160px;
    y: -30px;
  }
}