Ejemplo 1: código js para la barra de progreso de descarga de una página web
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1" data-filename="filename.xml">Click to download</div>
<script>
$('#a1').click(function() {
var that = this;
var page_url = 'download.php';
var req = new XMLHttpRequest();
req.open("POST", page_url, true);
req.addEventListener("progress", function (evt) {
if(evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
}
}, false);
req.responseType = "blob";
req.onreadystatechange = function () {
if (req.readyState === 4 && req.status === 200) {
var filename = $(that).data('filename');
if (typeof window.chrome !== 'undefined') {
// Chrome version
var link = document.createElement('a');
link.href = window.URL.createObjectURL(req.response);
link.download = filename;
link.click();
} else if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE version
var blob = new Blob([req.response], { type: 'application/force-download' });
window.navigator.msSaveBlob(blob, filename);
} else {
// Firefox version
var file = new File([req.response], filename, { type: 'application/force-download' });
window.open(URL.createObjectURL(file));
}
}
};
req.send();
});
</script>
Ejemplo 2: barra de progreso de llenado de formulario html5
$("#form input").keyup(function() {
var numValid = 0;
$("#form input[required]").each(function() {
if (this.validity.valid) {
numValid++;
}
});
var progress = $("#progress"),
progressMessage = $("#progress-message");
if (numValid == 0) {
progress.attr("value", "0");
progressMessage.text("Complete the form.");
}
if (numValid == 1) {
progress.attr("value", "20");
progressMessage.text("There you go, great start!");
}
if (numValid == 2) {
progress.attr("value", "40");
progressMessage.text("Nothing can stop you now.");
}
if (numValid == 3) {
progress.attr("value", "60");
progressMessage.text("You're basically a hero, right?");
}
if (numValid == 4) {
progress.attr("value", "80");
progressMessage.text("They are going to write songs about you.");
}
if (numValid == 5) {
progress.attr("value", "95");
progressMessage.text("SO CLOSE.");
}
});
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)