Striped Progress

var fill = document.getElementById('striped-fill');

new MultipleUpload(document.getElementById('demo-striped'), {
 uploadUrl: '/api/upload',
 multiple: true,
 onTaskProgress: function(task) {
 fill.style.width = task.progress + '%';
 },
 onComplete: function() {
 fill.style.width = '100%';
 }
});

Restyling the bar

The progress elements are plain markup with the component's class names, so an animated stripe, a different fill colour or a completely different shape is a CSS change and nothing more. onTaskProgress is there when you want to drive an indicator of your own rather than restyle this one.

Animation should mean something

A moving stripe reads as “working”, which is useful precisely when the percentage is not moving — a large chunk mid-flight, a server thinking about a response. It becomes a liability if it keeps animating after a stall, because it then says the opposite of what is true. Stop it when the task stops.