{"id":6315,"date":"2014-04-22T22:15:03","date_gmt":"2014-04-22T22:15:03","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6315"},"modified":"2019-03-02T09:13:50","modified_gmt":"2019-03-02T09:13:50","slug":"progress-bar-colors","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/","title":{"rendered":"Progress bar colors"},"content":{"rendered":"<p>En un art\u00edculo anterior ya hab\u00edamos hablado de una barra de progreso animada que se ejecuta durante unos segundos empleando jQuery. En este art\u00edculo solo queremos ofrecer una maquetaci\u00f3n interesante empleando CSS3 para estas barras ya sean din\u00e1micas o est\u00e1ticas.<\/p>\n<p>Las barras din\u00e1micas se utilizan para simular la carga de una p\u00e1gina o descarga de un archivo, entre otras operaciones. Y las barras est\u00e1ticas se podr\u00edan utilizar por ejemplo para implementar las barras de porcentaje para las respuestas de una encuesta.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6316\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/04\/progress-bar-colors.png\" alt=\"progress-bar-colors\" width=\"962\" height=\"141\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/04\/progress-bar-colors.png 962w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/04\/progress-bar-colors-300x43.png 300w\" sizes=\"auto, (max-width: 962px) 100vw, 962px\" \/><\/p>\n<p>Para a\u00f1adir estas barras en tu p\u00e1gina Web tan solo tienes que a\u00f1adir las siguientes clases CSS:<\/p>\n<pre lang=\"\">\r\n.progress {\r\n    border: 1px solid #ccc;\r\n    position: relative;\r\n    display: block;\r\n    height: 22px;\r\n    padding: 0;\r\n    min-width: 200px;\r\n    margin:4px 0;\r\n    background: #DEDEDE;\r\n    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#e9e9e9));\r\n    background: -moz-linear-gradient(top, #ccc, #e9e9e9);\r\n    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#e9e9e9');\r\n\r\n    -moz-box-shadow:0 1px 0 #fff;\r\n    -webkit-box-shadow:0 1px 0 #fff;\r\n    box-shadow:0 1px 0 #fff;\r\n\r\n    -moz-border-radius: 4px;\r\n    -webkit-border-radius: 4px;\r\n    border-radius: 4px;\r\n}\r\n.progress span {\r\n    display: block;\r\n    height: 20px;\r\n    margin: 0;\r\n    padding: 0;\r\n    text-align:center;\r\n    width:0;\r\n    \r\n    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);\r\n    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);\r\n    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);\r\n\r\n    -moz-border-radius: 3px;\r\n    -webkit-border-radius: 3px;\r\n    border-radius: 3px;\r\n}\r\n.progress span b{\r\n    color:#fff;\r\n    line-height:20px;\r\n    padding-left:2px;\r\n    text-shadow:0 1px 1px rgba(0, 0, 0, 0.5);\r\n}\r\n\r\n.progress-blue span {\r\n    border: 1px solid #0078a5; \r\n    background-color: #5C9ADE;\r\n    background: -moz-linear-gradient(top, #00adee 10%, #0078a5 90%);\r\n    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #00adee), color-stop(0.9, #0078a5));\r\n    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');\r\n}\r\n<\/pre>\n<p>Y luego dentro del &lt;body&gt; all\u00ed donde queramos los tags HTML:<\/p>\n<pre lang=\"html\">\r\n<div class=\"progress progress-blue\"><span style=\"width: 50%;\"><b>50%<\/b><\/span><\/div>\r\n<\/pre>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/css\/progress-bar-colors\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ver ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En un art\u00edculo anterior ya hab\u00edamos hablado de una barra de progreso animada que se ejecuta durante unos segundos empleando jQuery. En este art\u00edculo solo queremos ofrecer una maquetaci\u00f3n interesante empleando CSS3 para estas barras ya sean din\u00e1micas o est\u00e1ticas. Las barras din\u00e1micas se utilizan para simular la carga de una p\u00e1gina o descarga de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6316,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[162],"class_list":["post-6315","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-progress-bar"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Progress bar colors - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Maquetaci\u00f3n interesante en distintos colores de las barras de progreso con CSS3.\" \/>\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=\"Progress bar colors - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Maquetaci\u00f3n interesante en distintos colores de las barras de progreso con CSS3.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/\" \/>\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=\"2014-04-22T22:15:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-02T09:13:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/04\/progress-bar-colors.png\" \/>\n\t<meta property=\"og:image:width\" content=\"962\" \/>\n\t<meta property=\"og:image:height\" content=\"141\" \/>\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=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/\",\"name\":\"Progress bar colors - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/04\/progress-bar-colors.png\",\"datePublished\":\"2014-04-22T22:15:03+00:00\",\"dateModified\":\"2019-03-02T09:13:50+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Maquetaci\u00f3n interesante en distintos colores de las barras de progreso con CSS3.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/04\/progress-bar-colors.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/04\/progress-bar-colors.png\",\"width\":962,\"height\":141},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Progress bar colors\"}]},{\"@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":"Progress bar colors - Jose Aguilar Blog","description":"Maquetaci\u00f3n interesante en distintos colores de las barras de progreso con CSS3.","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":"Progress bar colors - Jose Aguilar Blog","og_description":"Maquetaci\u00f3n interesante en distintos colores de las barras de progreso con CSS3.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2014-04-22T22:15:03+00:00","article_modified_time":"2019-03-02T09:13:50+00:00","og_image":[{"width":962,"height":141,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/04\/progress-bar-colors.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":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/","url":"https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/","name":"Progress bar colors - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/04\/progress-bar-colors.png","datePublished":"2014-04-22T22:15:03+00:00","dateModified":"2019-03-02T09:13:50+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Maquetaci\u00f3n interesante en distintos colores de las barras de progreso con CSS3.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/04\/progress-bar-colors.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/04\/progress-bar-colors.png","width":962,"height":141},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/progress-bar-colors\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Progress bar colors"}]},{"@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\/6315","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=6315"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6315\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6316"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}