Este team de expertos despúes de algunos días de trabajo y de recopilar de datos, han obtenido la respuesta, queremos que te sea útil en tu plan.
Ejemplo 1: barra de progreso de jquery
<!DOCTYPE html><html><style>
#myProgress
width:100%;
background-color: #ddd;
#myBar
width:1%;
height:30px;
background-color: #4CAF50;</style><body><h1>JavaScriptProgressBar</h1><div id="myProgress"><div id="myBar"></div></div><br><button onclick="move()">ClickMe</button><script>var i =0;functionmove()if(i ==0)
i =1;var elem =document.getElementById("myBar");var width =1;var id =setInterval(frame,10);functionframe()if(width >=100)clearInterval(id);
i =0;else
width++;
elem.style.width= width +"%";</script></body></html>Ejemplo 2: 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 =newXMLHttpRequest();
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(typeofwindow.chrome!=='undefined')// Chrome versionvar link =document.createElement('a');
link.href=window.URL.createObjectURL(req.response);
link.download= filename;
link.click();elseif(typeofwindow.navigator.msSaveBlob!=='undefined')// IE versionvar blob =newBlob([req.response], type:'application/force-download');window.navigator.msSaveBlob(blob, filename);else// Firefox versionvar file =newFile([req.response], filename, type:'application/force-download');window.open(URL.createObjectURL(file));;
req.send(););</script>¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)