<div class="wrapper">
  <div class="loader">
    <div class="v-bar first"></div>
    <div class="v-bar second"></div>
    <div class="v-bar third"></div>
  </div>
</div>

.loader {
  position: relative;
}
.loader .v-bar {
  position: absolute;
  bottom: 0;
  width: 20px;
  margin: 2px;
  display: inline-block;
  -webkit-animation: v-bar-grow .8s infinite linear;
}

@-webkit-keyframes v-bar-grow {
  0%  {height:20px;}
  20%  {height:45px;}
  40%  {height:60px;}
  60%  {height:60px;}
  80%  {height:45px;}
  100% {height:20px;}
}

.v-bar.first {
  background-color: #235789;
  animation-delay: .3s;
  left: 0;
}

.v-bar.second {
  background-color: #ED1C24;
  left: 25px;
}

.v-bar.third {
  background-color: #F1D302;
  animation-delay: .5s;
  left: 50px;
}

.wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}