I would like to know how I make a progress bar WITH VALUES when entering a page, that is, not to upload an image but to show me the percentage of the entire page, of all the resources.
a progress bar while loading the whole page
An example of what I'm looking for: link
I imagine that this page uses a plugin
try with CODE that I found.
but the ajax did not help me load the image, but I need you to upload all the resources of a page
Any ideas?
baseUrl = "";
var ajax_load = "<div class='progress'>" + "<div id='progress_id' class='progress-bar progress-bar-striped active' " +
"role='progressbar' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100' style='width: 0%'>" +
"n/100</div></div>";
$("#menu_navegacion_inicio").on("click", function(ev) {
// estas dos lineas no cambian
ev.preventDefault();
var href = $(this).attr('href');
// sustituir el contenido de subpagina con el mensaje de carga
$("#subpagina").html(ajax_load);
// hacer llamada ajax al href
$.ajax({
url: baseUrl + href,
// cuando se completa la petición
success: function(codigo) {
// rellenar la subpagina con el HTML obtenido
$("#subpagina").html("COMPLETADO!");
},
// modificar el valor de xhr a nuestro gusto
xhr: function() {
// obtener el objeto XmlHttpRequest nativo
var xhr = $.ajaxSettings.xhr();
// añadirle un controlador para el evento onprogress
xhr.onprogress = function(evt) {
// calculamos el porcentaje y nos quedamos sólo con la parte entera
var porcentaje = Math.floor((evt.loaded / evt.total * 100));
// actualizamos el texto con el porcentaje mostrado
$("#progress_id").text(porcentaje + "/100");
// actualizamos la cantidad avanzada en la barra de progreso
$("#progress_id").attr("aria-valuenow", porcentaje);
$("#progress_id").css("width", porcentaje + "%");
};
// devolvemos el objeto xhr modificado
return xhr;
}
});
});<head>
<title>
Test Onprogress
</title>
</head>
<body>
<a id="menu_navegacion_inicio" href="https://i.imgur.com/Bq6ryBM.jpg">Click here</a>
<div id="subpagina"></div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw=="
crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
</body>