<div class="foo"></div>

@color: #457BBE;
body{background: #E2E2E2;}
.foo
{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 200px;
  background: @color;
  transform: translateZ(0);
  animation: foo 2.5s linear alternate infinite;
}
.foo:after
,.foo:before{
  content: '';
  position: absolute;
}
.foo:after{
  right: -100%;
  width: 100%;
  height: 200px;
  background: @color;
  animation: bar 2.5s linear alternate infinite;
}
.foo:before{
  top: -200px;
  left: 100%;
  width: 50px;
  height: 50px;
  border-style: solid;
   border-color: transparent black black transparent;
   border-width: 5px;
  background: transparent;
  transform: rotate(45deg) translateX(-70%); 
  animation: arrow 2.5s linear alternate infinite;
}

@keyframes foo{
  80%{
    border-radius: 0;
  }
  98%,100%{
    border-top-right-radius: 100%;
  }
}
@keyframes bar{
  80%{
    border-radius: 0;
  }
  98%,100%{
    border-top-left-radius: 100%;
  }
}
@keyframes arrow{
  0%,50%{
    top: -200px;
  }
  25%,75%{
    top: -175px;
  }
  98%,100%{
    top: 50px;
  }
}