progressbar Loader

<style>
/* foulscode.blogspot.com */
body {
  margin: 200px 50px;
}
.progressbar {
  width: 300px;
  height: 25px;
  border-radius: 8px;
  box-shadow:
    0 2px 0px 0px hsl(210,90%,35%),
    2px 8px 15px 1px hsl(210,90%,70%);
  background-color: hsl(210,90%,70%);
  background-image:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 12%,
      rgba(255,255,255,.15) 15%,
      rgba(255,255,255,.15) 30%,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,.15) 70%,
      rgba(255,255,255,.15) 88%,
      rgba(255,255,255,0) 88%
    ),
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 25%,
      hsl(210,90%,40%) 25%,
      hsl(210,90%,40%) 50%,
      transparent 50%,
      transparent 75%,
      hsl(210,90%,40%) 75%,
      hsl(210,90%,40%) 100%
    );
  background-size: cover, 50px 50px;
  background-position: top, 0 0;
  text-indent: -999em;
  animation: loading 1s infinite linear;
}
@keyframes loading {
  0% {
    background-position: top, 0 0;
  }
  100% {
    background-position: top, 50px 0;
  }
}
/* foulscode.blogspot.com */
</style>
<div class="progressbar">please wait..</div>

DEMO