{"id":7750,"date":"2022-05-13T05:23:28","date_gmt":"2022-05-13T05:23:28","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7750"},"modified":"2022-05-26T04:20:09","modified_gmt":"2022-05-26T04:20:09","slug":"barras-de-progreso-con-css","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-css\/","title":{"rendered":"Barras de progreso con CSS"},"content":{"rendered":"

Las barras de progreso son un indicado claro que informa al usuario que debe esperar a que un proceso finalice.<\/p>\n

Cuando un proceso tarda en dar un resultado es muy importante informar al usuario de ello y no dejar una p\u00e1gina en blanco cargando que no dice nada y puede acabar desesperando al usuario en la espera.<\/p>\n

En estos casos, es muy probable que decida cerrar la ventana si no ve nada.<\/p>\n

Una buena idea para evitar esto es mostrar algo que indique que la p\u00e1gina se est\u00e1 cargando, las barras de progreso<\/strong>\u00a0pueden ser ideales para estas situaciones.<\/p>\n

Las\u00a0barras 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

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

Con la lectura de este art\u00edculo vas a descubrir una forma muy simple y clara de mostrar las barras de progreso usando simplemente las reglas de estilos CSS<\/strong>.<\/p>\n

Estructura HTML<\/h2>\n

La estructura HTML es muy simple. Lo puedes ver a continuaci\u00f3n:<\/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> style<\/span>=<\/span>"width:75%;"<\/span>><\/span>\n        <span<\/span><\/a> class<\/span>=<\/span>"progress-bar-text"<\/span>><\/span>75%<\/<\/span>span<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Tan solo defino 2 contenedores anidados.<\/p>\n
El contenedor con clase=\u00bbprogress\u00bb es como el contenedor padre que cotiene todo el elemento.<\/p>\n
El contenedor interior con clase=\u00bbprogress-bar\u00bb es el elemento que indica el porcentaje de progreso.<\/p>\n
En este contenedor establezco el atributo style con un acho para del 75% para que justamente me ocupe ese espacio del contenedor padre.<\/p>\n
Te preguntar\u00e1s \u00bfporqu\u00e9 pones un atributo style en el elemento y no usa la hoja de estilos CSS para establecer el ancho?<\/p>\n
Tiene su l\u00f3gica. Cuando quieras darle movimiento din\u00e1mico con JavaScript, por ejemplo, resulta m\u00e1s f\u00e1cil actualizar ese atributo. Te dar\u00e1s cuenta cuando publique pr\u00f3ximamente un tutorial de como aplicarle movimiento a la barra de progreso.<\/p>\n
Y, finalmente, defino un span con clase=\u00bbprogress-bar-text\u00bb que uso para informar al usuario del porcentaje actual de carga.<\/p>\n
Reglas de estilo CSS<\/h2>\n
Las reglas de estilo tambi\u00e9n he intentado simplificarlas al m\u00e1ximo y le he dado mi propio estilo. Lo que me gustar\u00eda decirte es que es muy f\u00e1cil customizarlo a tu gusto.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
.progress<\/span> {<\/span>\n    height<\/span>:<\/span> 35px<\/span>;<\/span>\n    width<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\n    border<\/span>:<\/span> 1px<\/span> solid<\/span> #428bca<\/span>;<\/span>\n    border-radius:<\/span> 5px<\/span>;<\/span>\n    background-color<\/span>:<\/span> #e6f3fa<\/span>;<\/span>\n    margin-bottom<\/span>:<\/span> 15px<\/span>;<\/span>\n}<\/span>\n \n.progress-bar<\/span> {<\/span>\n    height<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\n    background<\/span>:<\/span> #428bca<\/span>;<\/span>\n    display<\/span>:<\/span> flex;<\/span>\n    align-items:<\/span> center<\/span>;<\/span>\n    transition:<\/span> width<\/span> 0.25s;<\/span>\n    border-radius:<\/span> 5px<\/span>;<\/span>\n}<\/span>\n \n.progress-bar-text<\/span> {<\/span>\n    margin-left<\/span>:<\/span> 10px<\/span>;<\/span>\n    font-weight<\/span>:<\/span> bold<\/span>;<\/span>\n    color<\/span>:<\/span> #cce7f5<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Resultado<\/h2>\n
\"Barra<\/p>\n
Conclusiones<\/h2>\n
En este art\u00edculo te he presentado como crear un aspecto agradable, sencillo y personalizable de una barra de progreso que puedes utilizar en tus proyectos.<\/p>\n
Existen otras herramientas para hacerle esperar al usuario de que un proceso se est\u00e1 completando y que debe espera, como por ejemplo, una cuenta atr\u00e1s, una rueda girando o los puntos suspensivos, entre otros.<\/p>\n
Para mi gusto las barras de progreso son las que mejor representan el efecto de cargando.<\/p>\n
Si tu proyecto va a hacer esperar al usuario para completar una tarea o proceso, no dudes en utilizar las barras de progreso para indicarle que debe esperar a que finalice el proceso para obtener su solicitud.<\/p>\n
De esta forma, tu p\u00e1gina web o proyecto ser\u00e1 m\u00e1s usable y pensado para el usuario final.<\/p>\n
Si te interesa este tipo de contenido, te recomiendo que est\u00e9s al tanto, ya que, pr\u00f3ximamente tengo pensado publicar como mover esta barra de progreso de forma din\u00e1mica con JavaScript. No te lo puedes perder.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Descubre como estructurar y maquetar las barras de progreso para tu proyecto o sitio web de forma simple y clara.<\/p>\n","protected":false},"author":1,"featured_media":7760,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[162],"class_list":["post-7750","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-progress-bar"],"yoast_head":"\nBarras de progreso con CSS - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Descubre como estructurar y maquetar las barras de progreso para tu proyecto o sitio web de forma simple y clara.\" \/>\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 CSS - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Descubre como estructurar y maquetar las barras de progreso para tu proyecto o sitio web de forma simple y clara.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-css\/\" \/>\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=\"2022-05-13T05:23:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-26T04:20:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Barras-de-progreso-con-CSS-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\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-css\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-css\/\",\"name\":\"Barras de progreso con CSS - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Barras-de-progreso-con-CSS-2.png\",\"datePublished\":\"2022-05-13T05:23:28+00:00\",\"dateModified\":\"2022-05-26T04:20:09+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Descubre como estructurar y maquetar las barras de progreso para tu proyecto o sitio web de forma simple y clara.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-css\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Barras-de-progreso-con-CSS-2.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Barras-de-progreso-con-CSS-2.png\",\"width\":500,\"height\":500,\"caption\":\"Barras de progreso con CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Barras de progreso con CSS\"}]},{\"@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 CSS - Jose Aguilar Blog","description":"Descubre como estructurar y maquetar las barras de progreso para tu proyecto o sitio web de forma simple y clara.","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 CSS - Jose Aguilar Blog","og_description":"Descubre como estructurar y maquetar las barras de progreso para tu proyecto o sitio web de forma simple y clara.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-css\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2022-05-13T05:23:28+00:00","article_modified_time":"2022-05-26T04:20:09+00:00","og_image":[{"width":500,"height":500,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Barras-de-progreso-con-CSS-2.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-css\/","url":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-css\/","name":"Barras de progreso con CSS - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-css\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Barras-de-progreso-con-CSS-2.png","datePublished":"2022-05-13T05:23:28+00:00","dateModified":"2022-05-26T04:20:09+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Descubre como estructurar y maquetar las barras de progreso para tu proyecto o sitio web de forma simple y clara.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-css\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Barras-de-progreso-con-CSS-2.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Barras-de-progreso-con-CSS-2.png","width":500,"height":500,"caption":"Barras de progreso con CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/barras-de-progreso-con-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Barras de progreso con CSS"}]},{"@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\/7750","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=7750"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7750\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7760"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}