{"id":7218,"date":"2019-02-11T12:21:15","date_gmt":"2019-02-11T12:21:15","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7218"},"modified":"2019-06-27T11:53:08","modified_gmt":"2019-06-27T11:53:08","slug":"barras-de-progreso-con-jquery","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery\/","title":{"rendered":"Barras de progreso con jQuery"},"content":{"rendered":"

Cuando un proceso tarda en dar un resultado es muy importante informar al usuario de ello y no dejar una p\u00e1gina en blanco que no dice nada que puede acabar desesperando al usuario en la espera. Es muy probable que decida cerrar la ventana si no ve nada. Una buena idea para evitar esto es mostrar algo que indique que la p\u00e1gina se est\u00e1 cargando, las barras de progreso<\/strong> pueden ser ideales para estas situaciones.<\/p>\n

Las barras de progreso<\/strong> son 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

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 Webs, aplicaciones o cualquier funcionalidad que requiera un proceso.<\/p>\n

En este tutorial vamos a explicar un ejemplo pr\u00e1ctico que te va a resultar muy \u00fatil para aplicar a tus aplicaciones o p\u00e1ginas Webs desarrolladas con jQuery<\/strong> o JavaScript<\/strong>.<\/p>\n

Para la parte visual de las barras de progreso<\/strong> nos vamos a apoyar en la librer\u00eda m\u00e1s popular para la interfaz gr\u00e1fica, Bootstrap 4<\/strong>.<\/p>\n

Para la implementaci\u00f3n de la barra de progreso,<\/strong> en la cabecera o dentro de la etiqueta <head> de mi archivo HTML<\/strong>, agrega lo siguiente:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<<\/span>script src=<\/span>"https:\/\/code.jquery.com\/jquery-3.2.1.js"<\/span>><\/<\/span>script><\/span>\n<<\/span>script><\/span>\n$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n    var<\/span> percent =<\/span> 0<\/span>;<\/span>\n \n    timerId =<\/span> setInterval(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n        \/\/increment progress bar<\/span>\n        percent +=<\/span> 5<\/span>;<\/span>\n        $(<\/span>'.progress-bar'<\/span>)<\/span>.css<\/span>(<\/span>'width'<\/span>,<\/span> percent+<\/span>'%'<\/span>)<\/span>;<\/span>\n        $(<\/span>'.progress-bar'<\/span>)<\/span>.attr<\/span>(<\/span>'aria-valuenow'<\/span>,<\/span> percent)<\/span>;<\/span>\n        $(<\/span>'.progress-bar'<\/span>)<\/span>.text<\/span>(<\/span>percent+<\/span>'%'<\/span>)<\/span>;<\/span>\n \n        \/\/complete<\/span>\n        if<\/span> (<\/span>percent ==<\/span> 100)<\/span> {<\/span>\n            clearInterval(<\/span>timerId)<\/span>;<\/span>\n            $(<\/span>'.information'<\/span>)<\/span>.show<\/span>(<\/span>)<\/span>;<\/span>\n        }<\/span>\n \n    }<\/span>,<\/span> 1000)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n<\/<\/span>script><\/span><\/pre><\/div><\/div>\n
Apoy\u00e1ndonos en la librer\u00eda jQuery<\/strong>, esperamos a que se cargue el documento para recorrer la barra de progreso utilizando la funci\u00f3n setInterval()<\/em> de JavaScript<\/strong>.<\/p>\n
En el c\u00f3digo anterior estamos incrementando la barra de progreso<\/strong> en 5% cada segundo. La variable percent <\/em>se va incrementando cada vez en 5 unidades y su valor es mostrado dentro de la barra de progreso<\/strong> que tendremos en nuestro cuerpo de la p\u00e1gina. Al completarse o llegar al valor 100, hacemos una limpieza de nuestro contador y mostramos un mensaje informativo que indica el fin del proceso.<\/p>\n
En el cuerpo o dentro de la etiqueta <body> agregaremos los contendedores que van a representar la barra de progreso<\/strong>:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"progress"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"progress-bar"<\/span> role=<\/span>"progressbar"<\/span> style<\/span>=<\/span>"width: 0%"<\/span> aria-valuenow=<\/span>"0"<\/span> aria-valuemin=<\/span>"0"<\/span> aria-valuemax=<\/span>"100"<\/span>><\/span>0%<\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span>\n<br<\/span><\/a>\/<\/span>><\/span>\n<div<\/span><\/a> class<\/span>=<\/span>"information"<\/span> style<\/span>=<\/span>"display:none;"<\/span>><\/span>              \n    <div<\/span><\/a> class<\/span>=<\/span>"alert alert-info"<\/span>><\/span>Lorem Ipsum...<\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
El c\u00f3digo HTML<\/strong> se compone de 2 contenedores. Uno representa la barra de progreso<\/strong> y el otro el bloque de informaci\u00f3n que se muestra al final de proceso.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n
Hoy en d\u00eda las barras de progreso<\/strong> son omnipresentes. Las encontramos en aplicaciones para Windows<\/em>, aplicaciones Web y en apps para tel\u00e9fonos m\u00f3viles de \u00faltima generaci\u00f3n. Hasta en la Play Station<\/em> puedes verte con las dichosas barras de progreso<\/strong>, por ejemplo, cuando se est\u00e1 actualizando alg\u00fan juego o la misma consola.<\/p>\n
Se podr\u00eda decir que las barras de progreso<\/strong> forman parte de nuestra cultura quiz\u00e1s sin que te hayas dado cuenta ya que est\u00e1n presentes en toda la tecnolog\u00eda inform\u00e1tica.<\/p>\n
A pesar de que conviven con otros indicadores, como por ejemplo, los porcentajes, los relojes de arena, punteros animados del rat\u00f3n o iconos gif de carga, las barras de progreso<\/strong> contin\u00faan siendo el recurso gr\u00e1fico m\u00e1s utilizado cuando hay que describir el progreso de una tarea en un entorno inform\u00e1tico.<\/p>\n
\u00bfEst\u00e1s de acuerdo?<\/p>\n","protected":false},"excerpt":{"rendered":"
Tutorial y c\u00f3digo de ejemplo que te permite agregar barras de progreso a tu p\u00e1gina Web f\u00e1cilmente con el efecto de cargando e indicando el porcentaje restante.<\/p>\n","protected":false},"author":1,"featured_media":7341,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[167,162],"class_list":["post-7218","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-eventos","tag-progress-bar"],"yoast_head":"\nBarras de progreso con jQuery - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Tutorial y c\u00f3digo de ejemplo que te permite agregar barras de progreso f\u00e1cilmente con el efecto de cargando e indicando el porcentaje restante.\" \/>\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 - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Tutorial y c\u00f3digo de ejemplo que te permite agregar barras de progreso f\u00e1cilmente con el efecto de cargando e indicando el porcentaje restante.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery\/\" \/>\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-02-11T12:21:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-27T11:53:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/02\/barras-de-progreso-con-jquery.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=\"3 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\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery\/\",\"name\":\"Barras de progreso con jQuery - 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\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/02\/barras-de-progreso-con-jquery.png\",\"datePublished\":\"2019-02-11T12:21:15+00:00\",\"dateModified\":\"2019-06-27T11:53:08+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 f\u00e1cilmente con el efecto de cargando e indicando el porcentaje restante.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/02\/barras-de-progreso-con-jquery.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/02\/barras-de-progreso-con-jquery.png\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery\/#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\"}]},{\"@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 - Jose Aguilar Blog","description":"Tutorial y c\u00f3digo de ejemplo que te permite agregar barras de progreso f\u00e1cilmente con el efecto de cargando e indicando el porcentaje restante.","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 - Jose Aguilar Blog","og_description":"Tutorial y c\u00f3digo de ejemplo que te permite agregar barras de progreso f\u00e1cilmente con el efecto de cargando e indicando el porcentaje restante.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2019-02-11T12:21:15+00:00","article_modified_time":"2019-06-27T11:53:08+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/02\/barras-de-progreso-con-jquery.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":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery\/","url":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery\/","name":"Barras de progreso con jQuery - 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\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/02\/barras-de-progreso-con-jquery.png","datePublished":"2019-02-11T12:21:15+00:00","dateModified":"2019-06-27T11:53:08+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 f\u00e1cilmente con el efecto de cargando e indicando el porcentaje restante.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/02\/barras-de-progreso-con-jquery.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/02\/barras-de-progreso-con-jquery.png","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-jquery\/#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"}]},{"@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\/7218","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=7218"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7218\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7341"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}