<div class="loader__mask">
  <div class="loader"></div>
</div>
.loader {
  width: 148px;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: url(http://arjendebruijn.nl/img/waves2.svg) repeat-x 0 0;
  background-size: contain;
  -webkit-animation-name: bg--move;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes bg--move {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 148px 0;
  }
}

.loader__mask {
  margin: 100px auto;
  width: 45px;
  height: 62px;
  overflow: hidden;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.