Striped Progress Bar

Striped Animated Progress Bar

A Bootstrap-style striped and animated progress bar. The diagonal stripes animate continuously while the upload is in progress.

.striped-fill {
  background-image: linear-gradient(45deg,
    rgba(255,255,255,.2) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,.2) 50%,
    rgba(255,255,255,.2) 75%, transparent 75%);
  background-size: 1rem 1rem;
  animation: stripeAnim 1s linear infinite;
}

onTaskProgress: function(task, pct) {
  fill.style.width = pct + '%';
}