1. Demos
  2. Progress

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 + '%';
}