{"id":7248,"date":"2019-03-28T11:46:20","date_gmt":"2019-03-28T11:46:20","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7248"},"modified":"2019-06-27T11:52:15","modified_gmt":"2019-06-27T11:52:15","slug":"barras-de-progreso-con-jquery-ajax-y-php","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/","title":{"rendered":"Barras de progreso con jQuery, Ajax y PHP"},"content":{"rendered":"<p>Las\u00a0<strong>barras de progreso<\/strong>\u00a0son elementos gr\u00e1ficos que est\u00e1n presentes en casi todas las aplicaciones que realizan operaciones largas tales como cargar grandes archivos, procesamiento de im\u00e1genes o procesamiento de v\u00eddeos.<\/p>\n<p>Estas barras se utilizan para indicar al usuario que el ordenador est\u00e1 pensando o est\u00e1 ocupado haciendo alguna tarea. Lo mismo puede ocurrir en la carga de p\u00e1ginas web, aplicaciones o cualquier funcionalidad que requiera un proceso.<\/p>\n<p>En este tutorial vamos a explicar un ejemplo pr\u00e1ctico que te va a resultar muy \u00fatil o te va a servir como referencia para aplicar a tus aplicaciones o p\u00e1ginas web con conseguir el efecto de las barras de progreso funcionando paralelamente con el proceso que se est\u00e9 ejecutando. Vas a conocer una forma para mostrar barras de progreso de un proceso real utilizando <strong>jQuery<\/strong>, <strong>Ajax<\/strong>, <strong>PHP<\/strong> y <strong>MySQLi<\/strong>.<\/p>\n<p>Para la parte visual de las\u00a0<strong>barras de progreso<\/strong>\u00a0nos vamos a apoyar en la librer\u00eda m\u00e1s popular para la interfaz gr\u00e1fica,\u00a0<strong>Bootstrap 4<\/strong>. Gracias a esta tecnolog\u00eda, el aspecto que se puede conseguir es:<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/03\/barra-de-progreso-en-marcha.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7251\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/03\/barra-de-progreso-en-marcha.png\" alt=\"\" width=\"1022\" height=\"167\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/03\/barra-de-progreso-en-marcha.png 1022w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/03\/barra-de-progreso-en-marcha-300x49.png 300w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/03\/barra-de-progreso-en-marcha-768x125.png 768w\" sizes=\"auto, (max-width: 1022px) 100vw, 1022px\" \/><\/a><\/p>\n<p>En el ejemplo en funcionamiento se actualiza el estado de m\u00e1s de 7.000 comentarios de una tabla que tenemos en una base de datos para hacer pruebas.<\/p>\n<p>Precisamente, en la base de datos crearemos una tabla para guardar el proceso o progreso de la ejecuci\u00f3n.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/03\/process-table.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7249\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/03\/process-table.png\" alt=\"\" width=\"637\" height=\"49\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/03\/process-table.png 637w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/03\/process-table-300x23.png 300w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><\/a><\/p>\n<p>Donde podemos observar los siguientes campos:<\/p>\n<ul>\n<li><strong>id_process<\/strong>: Para identificar el proceso. Identificador \u00fanico.<\/li>\n<li><strong>executed<\/strong>: Guardaremos el n\u00famero de elementos procesados.<\/li>\n<li><strong>total<\/strong>: Guardaremos el total de elementos que se deben procesar.<\/li>\n<li><strong>percentage<\/strong>: Contiene el porcentaje actual de la ejecuci\u00f3n en curso.<\/li>\n<li><strong>execute_time<\/strong>: Guardamos el tiempo transcurrido.<\/li>\n<li><strong>date_add<\/strong>: Fecha en la que empieza el proceso.<\/li>\n<li><strong>date_upd<\/strong>: Fecha en la que se ha actualizado el proceso.<\/li>\n<\/ul>\n<p>Crea un archivo <em>config.php<\/em> para conectar con tu base de datos. Algo como lo siguiente te puede servir:<\/p>\n<div id=\"wpshdo_1\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_1\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_1\"><\/a><a id=\"wpshat_1\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_1\"  onClick=\"javascript:wpsh_toggleBlock(1)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_code(1)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_print(1)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_1\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"php\" style=\"font-family:monospace;\"><span class=\"kw2\">&lt;?php<\/span>\n<a href=\"http:\/\/www.php.net\/define\"><span class=\"kw3\">define<\/span><\/a><span class=\"br0\">&#40;<\/span><span class=\"st_h\">'DB_SERVER'<\/span><span class=\"sy0\">,<\/span> <span class=\"st_h\">'localhost'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<a href=\"http:\/\/www.php.net\/define\"><span class=\"kw3\">define<\/span><\/a><span class=\"br0\">&#40;<\/span><span class=\"st_h\">'DB_SERVER_USERNAME'<\/span><span class=\"sy0\">,<\/span> <span class=\"st_h\">'USERNAME'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<a href=\"http:\/\/www.php.net\/define\"><span class=\"kw3\">define<\/span><\/a><span class=\"br0\">&#40;<\/span><span class=\"st_h\">'DB_SERVER_PASSWORD'<\/span><span class=\"sy0\">,<\/span> <span class=\"st_h\">'PASSWORD'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<a href=\"http:\/\/www.php.net\/define\"><span class=\"kw3\">define<\/span><\/a><span class=\"br0\">&#40;<\/span><span class=\"st_h\">'DB_DATABASE'<\/span><span class=\"sy0\">,<\/span> <span class=\"st_h\">'DATABASE'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n<span class=\"re0\">$connexion<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">new<\/span> mysqli<span class=\"br0\">&#40;<\/span>DB_SERVER<span class=\"sy0\">,<\/span> DB_SERVER_USERNAME<span class=\"sy0\">,<\/span> DB_SERVER_PASSWORD<span class=\"sy0\">,<\/span> DB_DATABASE<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"sy1\">?&gt;<\/span><\/pre><\/div><\/div>\n<p>En la parte de arriba del archivo principal del c\u00f3digo, agrega el c\u00f3digo para conectar con tu base de datos, obtener el n\u00famero total de comentarios e inicializaci\u00f3n del proceso:<\/p>\n<div id=\"wpshdo_2\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_2\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_2\"><\/a><a id=\"wpshat_2\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_2\"  onClick=\"javascript:wpsh_toggleBlock(2)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_code(2)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_print(2)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_2\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"php\" style=\"font-family:monospace;\"><span class=\"kw2\">&lt;?php<\/span> \n<span class=\"kw1\">require<\/span><span class=\"br0\">&#40;<\/span><span class=\"st_h\">'config.php'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"re0\">$result<\/span> <span class=\"sy0\">=<\/span> <span class=\"re0\">$connexion<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">query<\/span><span class=\"br0\">&#40;<\/span><span class=\"st_h\">'SELECT COUNT(*) as total_comments FROM comments'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"re0\">$row<\/span> <span class=\"sy0\">=<\/span> <span class=\"re0\">$result<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">fetch_assoc<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"re0\">$num_total_rows<\/span> <span class=\"sy0\">=<\/span> <span class=\"re0\">$row<\/span><span class=\"br0\">[<\/span><span class=\"st_h\">'total_comments'<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n<span class=\"re0\">$update_process<\/span> <span class=\"sy0\">=<\/span> <span class=\"st_h\">'UPDATE process SET total = '<\/span><span class=\"sy0\">.<\/span><span class=\"re0\">$num_total_rows<\/span><span class=\"sy0\">.<\/span><span class=\"st_h\">', percentage = 0, executed = 0, execute_time = &quot;&quot;, date_add = now() WHERE id_process = 1'<\/span><span class=\"sy0\">;<\/span>\n<span class=\"re0\">$connexion<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">query<\/span><span class=\"br0\">&#40;<\/span><span class=\"re0\">$update_process<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"sy1\">?&gt;<\/span><\/pre><\/div><\/div>\n<p>En el cuerpo de la p\u00e1gina o dentro de la etiqueta &lt;body&gt; tenemos un formulario con el siguiente contenido:<\/p>\n<div id=\"wpshdo_3\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_3\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_3\"><\/a><a id=\"wpshat_3\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_3\"  onClick=\"javascript:wpsh_toggleBlock(3)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_code(3)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_print(3)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_3\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"php\" style=\"font-family:monospace;\">&lt;form id=&quot;start_form&quot; action=&quot;#&quot; method=&quot;post&quot;&gt;\n    &lt;input type=&quot;hidden&quot; id=&quot;total_comments&quot; name=&quot;total_comments&quot; value=&quot;<span class=\"kw2\">&lt;?php<\/span> <span class=\"kw1\">echo<\/span> <span class=\"re0\">$num_total_rows<\/span><span class=\"sy0\">;<\/span> <span class=\"sy1\">?&gt;<\/span>&quot; \/&gt;\n    &lt;div class=&quot;form-group&quot;&gt;\n        &lt;label for=&quot;batch&quot;&gt;N\u00famero de elementos que se procesan en cada iteraci\u00f3n&lt;\/label&gt;\n        &lt;select class=&quot;form-control&quot; id=&quot;batch&quot; name=&quot;batch&quot;&gt;\n            <span class=\"kw2\">&lt;?php<\/span>\n            <span class=\"co1\">\/\/divisors<\/span>\n            <span class=\"kw1\">for<\/span><span class=\"br0\">&#40;<\/span><span class=\"re0\">$i<\/span> <span class=\"sy0\">=<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">;<\/span> <span class=\"re0\">$i<\/span> <span class=\"sy0\">&lt;<\/span> <span class=\"re0\">$num_total_rows<\/span><span class=\"sy0\">;<\/span> <span class=\"re0\">$i<\/span> <span class=\"sy0\">++<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n                <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span><span class=\"re0\">$num_total_rows<\/span> <span class=\"sy0\">%<\/span> <span class=\"re0\">$i<\/span> <span class=\"sy0\">==<\/span> 0<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n                    <span class=\"kw1\">echo<\/span> <span class=\"st_h\">'&lt;option value=&quot;'<\/span><span class=\"sy0\">.<\/span><span class=\"re0\">$i<\/span><span class=\"sy0\">.<\/span><span class=\"st_h\">'&quot;&gt;'<\/span><span class=\"sy0\">.<\/span><span class=\"re0\">$i<\/span><span class=\"sy0\">.<\/span><span class=\"st_h\">'&lt;\/option&gt;'<\/span><span class=\"sy0\">;<\/span>\n                <span class=\"br0\">&#125;<\/span>\n            <span class=\"br0\">&#125;<\/span>\n            <span class=\"sy1\">?&gt;<\/span>\n        &lt;\/select&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;form-group&quot;&gt;\n        &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot; onclick=&quot;executeProcess(0);return false;&quot;&gt;\n            &lt;i class=&quot;fa fa-eye&quot;&gt;&lt;\/i&gt; Ejecutar\n        &lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/form&gt;<\/pre><\/div><\/div>\n<p>Mostramos un selector de los divisores del n\u00famero de comentarios que se van a procesar para poder ejecutar el proceso por un lote divisor del n\u00famero de elementos a procesar. De esta forma, nos aseguramos de procesar todos los datos y correr la barra de progreso hasta el 100%.<\/p>\n<p>Un bot\u00f3n que permite ejecutar el proceso tambi\u00e9n est\u00e1 presente en este formulario. F\u00edjate bien en el atributo onclick del bot\u00f3n o enlace. Estamos llamando a la funci\u00f3n principal del proceso con un par\u00e1metro inicial = 0.<\/p>\n<p>En el cuerpo de la p\u00e1gina o dentro del &lt;body&gt; tambi\u00e9n debes agregar:<\/p>\n<div id=\"wpshdo_4\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_4\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_4\"><\/a><a id=\"wpshat_4\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_4\"  onClick=\"javascript:wpsh_toggleBlock(4)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_4\" onClick=\"javascript:wpsh_code(4)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_4\" onClick=\"javascript:wpsh_print(4)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_4\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;sending&quot;<\/span> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;col-lg-12&quot;<\/span> <span class=\"kw3\">style<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;display:none;&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/h3.html\"><span class=\"kw2\">h3<\/span><\/a>&gt;<\/span>Procesando...<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/h3.html\"><span class=\"kw2\">h3<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;progress&quot;<\/span>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;progress-bar progress-bar-success progress-bar-striped active&quot;<\/span> role<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;progressbar&quot;<\/span> aria-valuenow<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;40&quot;<\/span> aria-valuemin<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;0&quot;<\/span> aria-valuemax<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;100&quot;<\/span> data-progress<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;0&quot;<\/span> <span class=\"kw3\">style<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;width: 0%;&quot;<\/span>&gt;<\/span>\n            0%\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;counter-sending&quot;<\/span>&gt;<\/span>\n        (<span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/span.html\"><span class=\"kw2\">span<\/span><\/a> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;done&quot;<\/span>&gt;<\/span>0<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/span.html\"><span class=\"kw2\">span<\/span><\/a>&gt;<\/span>\/<span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/span.html\"><span class=\"kw2\">span<\/span><\/a> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;total&quot;<\/span>&gt;<\/span>0<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/span.html\"><span class=\"kw2\">span<\/span><\/a>&gt;<\/span>)\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n&nbsp;\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;execute-time-content&quot;<\/span>&gt;<\/span>\n        Tiempo transcurrido: <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/span.html\"><span class=\"kw2\">span<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;execute-time&quot;<\/span>&gt;<\/span>0 segundos<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/span.html\"><span class=\"kw2\">span<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n&nbsp;\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;end-process&quot;<\/span> <span class=\"kw3\">style<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;display:none;&quot;<\/span>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;alert alert-success&quot;<\/span>&gt;<\/span>El proceso ha sido completado. <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a> <span class=\"kw3\">href<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;https:\/\/www.jose-aguilar.com\/scripts\/jquery\/ajax-progress-bar\/&quot;<\/span>&gt;<\/span>Probar otra vez<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a>&gt;&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>    \n<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span><\/pre><\/div><\/div>\n<p>El contenedor con identificador \u00absending\u00bb inicialmente est\u00e1 oculto pero, se habilita una vez se pulsa el bot\u00f3n \u00abEjecutar\u00bb con el objetivo principal de mostrar la barra de progreso, el n\u00famero de elementos procesados y el tiempo transcurrido.<\/p>\n<p>El contenedor con clase \u00abexecute-time-content\u00bb muestra el tiempo transcurrido.<\/p>\n<p>Y, finalmente, el contenedor con clase \u00abend-process\u00bb muestra una alerta de confirmaci\u00f3n de proceso completado. Este contenedor se mostrar\u00e1 cuando la barra de progreso haya llegado a su valor m\u00e1ximo = 100.<\/p>\n<p>Para implementar la <strong>barra de progreso <\/strong>asociada al proceso<strong>,<\/strong> en la cabecera o dentro de la etiqueta &lt;head&gt; del archivo <strong>HTML<\/strong>, agrega lo siguiente c\u00f3digo <strong>JavaScript<\/strong>:<\/p>\n<div id=\"wpshdo_5\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_5\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_5\"><\/a><a id=\"wpshat_5\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_5\"  onClick=\"javascript:wpsh_toggleBlock(5)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_5\" onClick=\"javascript:wpsh_code(5)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_5\" onClick=\"javascript:wpsh_print(5)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_5\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"javascript\" style=\"font-family:monospace;\">&lt;script src=&quot;https:\/\/code.jquery.com\/jquery-3.2.1.js&quot;&gt;&lt;\/script&gt;\n<span class=\"sy0\">&lt;<\/span>script type<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;text\/javascript&quot;<\/span><span class=\"sy0\">&gt;<\/span>\n<span class=\"kw2\">function<\/span> executeProcess<span class=\"br0\">&#40;<\/span>offset<span class=\"sy0\">,<\/span> batch <span class=\"sy0\">=<\/span> <span class=\"kw2\">false<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n    <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>batch <span class=\"sy0\">==<\/span> <span class=\"kw2\">false<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        batch <span class=\"sy0\">=<\/span> parseInt<span class=\"br0\">&#40;<\/span>$<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#batch'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">val<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span>\n        batch <span class=\"sy0\">=<\/span> parseInt<span class=\"br0\">&#40;<\/span>batch<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span>\n&nbsp;\n    <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>offset <span class=\"sy0\">==<\/span> <span class=\"nu0\">0<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#start_form'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">hide<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n        $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#sending'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">show<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n        $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#sended'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">text<\/span><span class=\"br0\">&#40;<\/span>0<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n        $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#total'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">text<\/span><span class=\"br0\">&#40;<\/span>$<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#total_comments'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">val<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n        <span class=\"co1\">\/\/reset progress bar<\/span>\n        $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'.progress-bar'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">css<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'width'<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">'0%'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n        $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'.progress-bar'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">text<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'0%'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n        $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'.progress-bar'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">attr<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'data-progress'<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">'0'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span>\n&nbsp;\n    $.<span class=\"me1\">ajax<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#123;<\/span> \n        type<span class=\"sy0\">:<\/span> <span class=\"st0\">'POST'<\/span><span class=\"sy0\">,<\/span>\n        dataType<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;json&quot;<\/span><span class=\"sy0\">,<\/span>\n        url <span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;process.php&quot;<\/span><span class=\"sy0\">,<\/span> \n        data<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span>\n            id_process<span class=\"sy0\">:<\/span> 1<span class=\"sy0\">,<\/span>\n            offset<span class=\"sy0\">:<\/span> offset<span class=\"sy0\">,<\/span>\n            batch<span class=\"sy0\">:<\/span> batch\n        <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span>\n        success<span class=\"sy0\">:<\/span> <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span>response<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n            $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'.progress-bar'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">css<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'width'<\/span><span class=\"sy0\">,<\/span> response.<span class=\"me1\">percentage<\/span><span class=\"sy0\">+<\/span><span class=\"st0\">'%'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n            $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'.progress-bar'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">text<\/span><span class=\"br0\">&#40;<\/span>response.<span class=\"me1\">percentage<\/span><span class=\"sy0\">+<\/span><span class=\"st0\">'%'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n            $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'.progress-bar'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">attr<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">'data-progress'<\/span><span class=\"sy0\">,<\/span> response.<span class=\"me1\">percentage<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n            $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'#done'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">text<\/span><span class=\"br0\">&#40;<\/span>response.<span class=\"me1\">executed<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n            $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'.execute-time'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">text<\/span><span class=\"br0\">&#40;<\/span>response.<span class=\"me1\">execute_time<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n            <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>response.<span class=\"me1\">percentage<\/span> <span class=\"sy0\">==<\/span> <span class=\"nu0\">100<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n                $<span class=\"br0\">&#40;<\/span><span class=\"st0\">'.end-process'<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">show<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n            <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span>\n                <span class=\"kw2\">var<\/span> newOffset <span class=\"sy0\">=<\/span> offset <span class=\"sy0\">+<\/span> batch<span class=\"sy0\">;<\/span>\n&nbsp;\n                executeProcess<span class=\"br0\">&#40;<\/span>newOffset<span class=\"sy0\">,<\/span> batch<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n            <span class=\"br0\">&#125;<\/span>\n        <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span>\n        error<span class=\"sy0\">:<\/span> <span class=\"kw2\">function<\/span><span class=\"br0\">&#40;<\/span>XMLHttpRequest<span class=\"sy0\">,<\/span> textStatus<span class=\"sy0\">,<\/span> errorThrown<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n            <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>textStatus <span class=\"sy0\">==<\/span> <span class=\"st0\">'parsererror'<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n                textStatus <span class=\"sy0\">=<\/span> <span class=\"st0\">'Technical error: Unexpected response returned by server. Sending stopped.'<\/span><span class=\"sy0\">;<\/span>\n            <span class=\"br0\">&#125;<\/span>\n            <span class=\"kw3\">alert<\/span><span class=\"br0\">&#40;<\/span>textStatus<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n       <span class=\"br0\">&#125;<\/span>\n    <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span>\n<span class=\"sy0\">&lt;\/<\/span>script<span class=\"sy0\">&gt;<\/span><\/pre><\/div><\/div>\n<p>&nbsp;<\/p>\n<p>Hemos creado la funci\u00f3n <em>executeProcess(), <\/em>que es la funci\u00f3n que se ejecuta al pulsar el bot\u00f3n \u00abEjecutar\u00bb. Es la funci\u00f3n principal, la que se encarga de actualizar la barra de progreso, mostrar el n\u00famero de elementos procesados y mostrar el tiempo transcurrido.<\/p>\n<p>Es una funci\u00f3n <em>recursiva<\/em> que se llama a si misma en el <em>success<\/em> de la llamada <strong>Ajax<\/strong> con 2 par\u00e1metros importantes:<\/p>\n<ul>\n<li><strong>offset<\/strong>: N\u00famero de comienzo para la consulta limitada de comentarios.<\/li>\n<li><strong>batch<\/strong>: N\u00famero de elementos del lote. M\u00e1s bien el n\u00famero de comentarios que se actualizan en cada llamada <strong>Ajax<\/strong>.<\/li>\n<\/ul>\n<p>En la llamada <strong>Ajax<\/strong> estamos ejecutando el archivo <em>process.php,<\/em> donde est\u00e1 el c\u00f3digo que ejecuta el proceso por partes:<\/p>\n<div id=\"wpshdo_6\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_6\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_6\"><\/a><a id=\"wpshat_6\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_6\"  onClick=\"javascript:wpsh_toggleBlock(6)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_6\" onClick=\"javascript:wpsh_code(6)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_6\" onClick=\"javascript:wpsh_print(6)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_6\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"php\" style=\"font-family:monospace;\"><span class=\"kw2\">&lt;?php<\/span>\n<span class=\"kw1\">require_once<\/span><span class=\"br0\">&#40;<\/span><span class=\"st_h\">'config.php'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n<span class=\"re0\">$offset<\/span> <span class=\"sy0\">=<\/span> <span class=\"re0\">$_POST<\/span><span class=\"br0\">[<\/span><span class=\"st_h\">'offset'<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">;<\/span>\n<span class=\"re0\">$batch<\/span> <span class=\"sy0\">=<\/span> <span class=\"re0\">$_POST<\/span><span class=\"br0\">[<\/span><span class=\"st_h\">'batch'<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n<span class=\"re0\">$result<\/span> <span class=\"sy0\">=<\/span> <span class=\"re0\">$connexion<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">query<\/span><span class=\"br0\">&#40;<\/span>\n    <span class=\"st_h\">'SELECT * FROM comments ORDER BY date_added DESC LIMIT '<\/span><span class=\"sy0\">.<\/span><span class=\"re0\">$offset<\/span><span class=\"sy0\">.<\/span><span class=\"st_h\">', '<\/span><span class=\"sy0\">.<\/span><span class=\"re0\">$batch<\/span>\n<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span><span class=\"re0\">$result<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">num_rows<\/span> <span class=\"sy0\">&gt;<\/span> 0<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n    <span class=\"kw1\">while<\/span> <span class=\"br0\">&#40;<\/span><span class=\"re0\">$row_comments<\/span> <span class=\"sy0\">=<\/span> <span class=\"re0\">$result<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">fetch_assoc<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        <span class=\"co1\">\/\/proceso<\/span>\n        <span class=\"re0\">$update_comment<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;UPDATE comments SET approved = 1 WHERE comment_id = &quot;<\/span><span class=\"sy0\">.<\/span><span class=\"re0\">$row_comments<\/span><span class=\"br0\">[<\/span><span class=\"st_h\">'comment_id'<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"re0\">$connexion<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">query<\/span><span class=\"br0\">&#40;<\/span><span class=\"re0\">$update_comment<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n        <span class=\"re0\">$update_process<\/span> <span class=\"sy0\">=<\/span> <span class=\"st_h\">'UPDATE process SET executed = executed + 1 WHERE id_process = 1'<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"re0\">$connexion<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">query<\/span><span class=\"br0\">&#40;<\/span><span class=\"re0\">$update_process<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"co1\">\/\/sleep(3);<\/span>\n    <span class=\"br0\">&#125;<\/span>\n&nbsp;\n    <span class=\"re0\">$result_process<\/span> <span class=\"sy0\">=<\/span> <span class=\"re0\">$connexion<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">query<\/span><span class=\"br0\">&#40;<\/span><span class=\"st_h\">'SELECT * FROM process WHERE id_process = 1'<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"re0\">$row_process<\/span> <span class=\"sy0\">=<\/span> <span class=\"re0\">$result_process<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">fetch_assoc<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n    <span class=\"re0\">$percentage<\/span> <span class=\"sy0\">=<\/span> <a href=\"http:\/\/www.php.net\/round\"><span class=\"kw3\">round<\/span><\/a><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#40;<\/span><span class=\"re0\">$row_process<\/span><span class=\"br0\">[<\/span><span class=\"st_h\">'executed'<\/span><span class=\"br0\">]<\/span> <span class=\"sy0\">*<\/span> 100<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">\/<\/span> <span class=\"re0\">$row_process<\/span><span class=\"br0\">[<\/span><span class=\"st_h\">'total'<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">,<\/span> 2<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n    <span class=\"re0\">$date_add<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">new<\/span> DateTime<span class=\"br0\">&#40;<\/span><span class=\"re0\">$row_process<\/span><span class=\"br0\">[<\/span><span class=\"st_h\">'date_add'<\/span><span class=\"br0\">]<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"re0\">$date_upd<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw2\">new<\/span> DateTime<span class=\"br0\">&#40;<\/span><span class=\"re0\">$row_process<\/span><span class=\"br0\">[<\/span><span class=\"st_h\">'date_upd'<\/span><span class=\"br0\">]<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"re0\">$diff<\/span> <span class=\"sy0\">=<\/span> <span class=\"re0\">$date_add<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">diff<\/span><span class=\"br0\">&#40;<\/span><span class=\"re0\">$date_upd<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n    <span class=\"re0\">$execute_time<\/span> <span class=\"sy0\">=<\/span> <span class=\"st_h\">''<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n    <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span><span class=\"re0\">$diff<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">days<\/span> <span class=\"sy0\">&gt;<\/span> 0<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        <span class=\"re0\">$execute_time<\/span> <span class=\"sy0\">.=<\/span> <span class=\"re0\">$diff<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">days<\/span><span class=\"sy0\">.<\/span><span class=\"st_h\">' dias'<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span>\n    <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span><span class=\"re0\">$diff<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">h<\/span> <span class=\"sy0\">&gt;<\/span> 0<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        <span class=\"re0\">$execute_time<\/span> <span class=\"sy0\">.=<\/span> <span class=\"st_h\">' '<\/span><span class=\"sy0\">.<\/span><span class=\"re0\">$diff<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">h<\/span><span class=\"sy0\">.<\/span><span class=\"st_h\">' horas'<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span>\n    <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span><span class=\"re0\">$diff<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">i<\/span> <span class=\"sy0\">&gt;<\/span> 0<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        <span class=\"re0\">$execute_time<\/span> <span class=\"sy0\">.=<\/span> <span class=\"st_h\">' '<\/span><span class=\"sy0\">.<\/span><span class=\"re0\">$diff<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">i<\/span><span class=\"sy0\">.<\/span><span class=\"st_h\">' minutos'<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span>\n&nbsp;\n    <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span><span class=\"re0\">$diff<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">s<\/span> <span class=\"sy0\">&gt;<\/span> 1<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span>\n        <span class=\"re0\">$execute_time<\/span> <span class=\"sy0\">.=<\/span> <span class=\"st_h\">' '<\/span><span class=\"sy0\">.<\/span><span class=\"re0\">$diff<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">s<\/span><span class=\"sy0\">.<\/span><span class=\"st_h\">' segundos'<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span> <span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span>\n        <span class=\"re0\">$execute_time<\/span> <span class=\"sy0\">.=<\/span> <span class=\"st_h\">' 1 segundo'<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">&#125;<\/span>\n&nbsp;\n    <span class=\"re0\">$update_process<\/span> <span class=\"sy0\">=<\/span> <span class=\"st_h\">'UPDATE process SET percentage = '<\/span><span class=\"sy0\">.<\/span><span class=\"re0\">$percentage<\/span><span class=\"sy0\">.<\/span><span class=\"st_h\">', execute_time = &quot;'<\/span><span class=\"sy0\">.<\/span><span class=\"br0\">&#40;<\/span>string<span class=\"br0\">&#41;<\/span><span class=\"re0\">$execute_time<\/span><span class=\"sy0\">.<\/span><span class=\"st_h\">'&quot; WHERE id_process = 1'<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"re0\">$connexion<\/span><span class=\"sy0\">-&gt;<\/span><span class=\"me1\">query<\/span><span class=\"br0\">&#40;<\/span><span class=\"re0\">$update_process<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n&nbsp;\n    <span class=\"re0\">$row<\/span> <span class=\"sy0\">=<\/span> <a href=\"http:\/\/www.php.net\/array\"><span class=\"kw3\">array<\/span><\/a><span class=\"br0\">&#40;<\/span>\n        <span class=\"st_h\">'executed'<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"re0\">$row_process<\/span><span class=\"br0\">[<\/span><span class=\"st_h\">'executed'<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">,<\/span>\n        <span class=\"st_h\">'total'<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"re0\">$row_process<\/span><span class=\"br0\">[<\/span><span class=\"st_h\">'total'<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">,<\/span>\n        <span class=\"st_h\">'percentage'<\/span> <span class=\"sy0\">=&gt;<\/span> <a href=\"http:\/\/www.php.net\/round\"><span class=\"kw3\">round<\/span><\/a><span class=\"br0\">&#40;<\/span><span class=\"re0\">$percentage<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">0<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">,<\/span>\n        <span class=\"st_h\">'execute_time'<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"re0\">$execute_time<\/span>\n    <span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n    <a href=\"http:\/\/www.php.net\/die\"><span class=\"kw3\">die<\/span><\/a><span class=\"br0\">&#40;<\/span><a href=\"http:\/\/www.php.net\/json_encode\"><span class=\"kw3\">json_encode<\/span><\/a><span class=\"br0\">&#40;<\/span><span class=\"re0\">$row<\/span><span class=\"br0\">&#41;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span>\n<span class=\"sy1\">?&gt;<\/span><\/pre><\/div><\/div>\n<p>Como puedes ver, el archivo <em>process.php<\/em> se encarga de recuperar de la base de datos los elementos a procesar de forma limitada para ejecutar el proceso que sea. En el caso del ejemplo, tan solo estamos actualizando o validando los comentarios.<\/p>\n<p>Despu\u00e9s de eso, se actualiza la tabla auxiliar que tenemos para guardar el estado del progreso y mediante la llamada <strong>Ajax<\/strong> de tipo <strong>JSON<\/strong> retornamos un array con la informaci\u00f3n que nos interesa. Recuerda que el el <em>success<\/em> del <strong>Ajax<\/strong> se vuelve a llamar recursivamente a la funci\u00f3n <em>executeProcess()<\/em> hasta llegar al porcentaje del 100%.<\/p>\n<p>Este c\u00f3digo <strong>PHP<\/strong> puede ser m\u00e1s limpio si se trabaja con clases o con una programaci\u00f3n m\u00e1s orientada a objetos.<\/p>\n<p style=\"text-align: center;\"><a class=\"btn btn-secondary\" href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/ajax-progress-bar\/\" target=\"_blank\" rel=\"noopener noreferrer\"><i class=\"fa fa-eye\"><\/i> Ver demo<\/a> <a class=\"btn btn-primary\" href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/ajax-progress-bar\/ajax-progress-bar.zip\"><i class=\"fa fa-download\"><\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tutorial y c\u00f3digo de ejemplo que te permite agregar barras de progreso indicando el porcentaje realizado, los elementos procesados y el tiempo consumido.<\/p>\n","protected":false},"author":1,"featured_media":7339,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,5,3],"tags":[162],"class_list":["post-7248","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","category-jquery","category-php","tag-progress-bar"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Barras de progreso con jQuery, Ajax y PHP - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Tutorial y c\u00f3digo de ejemplo que te permite agregar barras de progreso indicando el porcentaje realizado, los elementos procesados y el tiempo consumido.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Barras de progreso con jQuery, Ajax y PHP - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Tutorial y c\u00f3digo de ejemplo que te permite agregar barras de progreso indicando el porcentaje realizado, los elementos procesados y el tiempo consumido.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-28T11:46:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-27T11:52:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/03\/barras-de-progreso-con-jquery-ajax-php.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/\",\"name\":\"Barras de progreso con jQuery, Ajax y PHP - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/03\/barras-de-progreso-con-jquery-ajax-php.png\",\"datePublished\":\"2019-03-28T11:46:20+00:00\",\"dateModified\":\"2019-06-27T11:52:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Tutorial y c\u00f3digo de ejemplo que te permite agregar barras de progreso indicando el porcentaje realizado, los elementos procesados y el tiempo consumido.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/03\/barras-de-progreso-con-jquery-ajax-php.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/03\/barras-de-progreso-con-jquery-ajax-php.png\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Barras de progreso con jQuery, Ajax y PHP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Barras de progreso con jQuery, Ajax y PHP - Jose Aguilar Blog","description":"Tutorial y c\u00f3digo de ejemplo que te permite agregar barras de progreso indicando el porcentaje realizado, los elementos procesados y el tiempo consumido.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Barras de progreso con jQuery, Ajax y PHP - Jose Aguilar Blog","og_description":"Tutorial y c\u00f3digo de ejemplo que te permite agregar barras de progreso indicando el porcentaje realizado, los elementos procesados y el tiempo consumido.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2019-03-28T11:46:20+00:00","article_modified_time":"2019-06-27T11:52:15+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/03\/barras-de-progreso-con-jquery-ajax-php.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/","url":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/","name":"Barras de progreso con jQuery, Ajax y PHP - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/03\/barras-de-progreso-con-jquery-ajax-php.png","datePublished":"2019-03-28T11:46:20+00:00","dateModified":"2019-06-27T11:52:15+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Tutorial y c\u00f3digo de ejemplo que te permite agregar barras de progreso indicando el porcentaje realizado, los elementos procesados y el tiempo consumido.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/03\/barras-de-progreso-con-jquery-ajax-php.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/03\/barras-de-progreso-con-jquery-ajax-php.png","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery-ajax-y-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Barras de progreso con jQuery, Ajax y PHP"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7248"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7248\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7339"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}