Progress Bar

by giacal

HTML

<progress value="0" max=""></progress>

JavaScript

var xhr = new XMLHttpRequest(),
    pgs = document.querySelector('progress');
    
xhr.open('GET', 'http://sandropaganotti.com/wp-content/goodies/samples/sintel-trailer.mp4', true);
xhr.responseType = 'blob';

xhr.onprogress = function(e){
    console.log(e);
    pgs.setAttribute('max', e.total);
    pgs.value = e.loaded;
    
};

xhr.send();