Striped Progress Bar

Add animated stripes to the progress bar for a more dynamic, engaging upload experience.

What you should see: an animated striped progress bar. Purely presentational — the underlying progress events are identical to the plain bar. Cap is 50 MB.

Ready

<style>
.striped-progress {
 background: repeating-linear-gradient(
 -45deg,
 #0891b2,
 #0891b2 10px,
 #06b6d4 10px,
 #06b6d4 20px
 );
 background-size: 28.28px 28.28px;
 animation: stripe-slide 0.6s linear infinite;
}
@@keyframes stripe-slide {
 0% { background-position: 0 0; }
 100% { background-position: 28.28px 0; }
}
</style> 
<div id="my-uploader"></div>
<div class="striped-progress" id="my-bar"></div> 
<script>
CoreUpload.create('#my-uploader', {
 uploadUrl: '/api/upload/upload',
 autoUpload: true,
 onTaskProgress: function(file, percent) {
 document.getElementById('my-bar').style.width = percent + '%';
 }
});
</script>