{"id":54,"date":"2017-11-17T21:07:59","date_gmt":"2017-11-17T21:07:59","guid":{"rendered":"http:\/\/jssoftware.pe.hu\/blog\/?p=54"},"modified":"2017-11-28T16:55:03","modified_gmt":"2017-11-28T16:55:03","slug":"barras-de-progreso-animadas","status":"publish","type":"post","link":"https:\/\/jssoftware.pe.hu\/blog\/plugins\/barras-de-progreso-animadas\/","title":{"rendered":"Barras de progreso animadas"},"content":{"rendered":"<p>El siguiente ejemplo est\u00e1 basado en el trabajo realizado por <a href=\"http:\/\/workshop.rs\/2012\/12\/animated-progress-bar-in-4-lines-of-jquery\/\">Lazarevic Ivan<\/a>, se agregan algunas cosas para que cambie de color dependiendo del valor que se le d\u00e9 a la barra de progreso, para realizarlo utiliza jQuery aunque se puede omitir utilizando solo JavaScript.<\/p>\n<p>1.- Agregamos las etiquetas HTML a nuestro proyecto.<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"div para barra de progreso\">&lt;div id=\"progress\"&gt;\r\n  &lt;div&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>2.- Le daremos estilo la division que funcionara como fondo vacio de la barra de progreso.<\/p>\n<pre class=\"lang:css decode:true\" title=\"agregar fondo a barra\">\/** divisi\u00f3n padre**\/\r\n#progress {\r\n    width: 300px;\r\n    height: 30px;\r\n    border: 1pt solid #111;\r\n    border-radius: 4px;\r\n    background: #404040;\r\n    border: 1px solid #272727;\r\n    overflow: hidden;\r\n    box-shadow: rgb(96, 96, 96) 0 0px 20px -1px;\r\n}\r\n\/** divisi\u00f3n hijo **\/\r\n#progress div {\r\n    height: 300px;\r\n    color: #404040;\r\n    text-align: right;\r\n    line-height: 30px;\r\n    \/* mismo tama\u00f1o que la divisi\u00f3n padre*\/\r\n    width: 0;\r\n    border-right: 1px solid #272727;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>Tendriamos algo asi&#8230;<\/p>\n<p><a href=\"http:\/\/jssoftware.pe.hu\/blog\/wp-content\/uploads\/2017\/11\/2017-11-17-11_20_45-Clipboard.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-61 alignnone\" src=\"http:\/\/jssoftware.pe.hu\/blog\/wp-content\/uploads\/2017\/11\/2017-11-17-11_20_45-Clipboard-300x37.png\" alt=\"\" width=\"300\" height=\"37\" srcset=\"https:\/\/jssoftware.pe.hu\/blog\/wp-content\/uploads\/2017\/11\/2017-11-17-11_20_45-Clipboard-300x37.png 300w, https:\/\/jssoftware.pe.hu\/blog\/wp-content\/uploads\/2017\/11\/2017-11-17-11_20_45-Clipboard.png 315w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>3.- Vamos a crear los estilos para las clases que asignaremos en base a los colores que queramos (con animaci\u00f3n) dependiendo del porcentaje que tengan, en este caso vamos a utilizar los siguientes:<\/p>\n<ul>\n<li>Color rojo : 0 &#8211; 25 %<\/li>\n<li>Color naranja: 26 &#8211; 50%<\/li>\n<li>Color verde: 51 -75%<\/li>\n<li>Color azul: 76 -100%<\/li>\n<\/ul>\n<pre class=\"lang:css decode:true\" title=\"css con animacion para barra de progreso\">.progress-min {\r\n    -webkit-animation: progress 1s linear infinite;\r\n    -moz-animation: progress 1s linear infinite;\r\n    animation: progress 1s linear infinite;\r\n    background-repeat: repeat-x;\r\n    background-size: 30px 30px;\r\n    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);\r\n    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);\r\n    background-color: #d43535;\r\n    box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);\r\n}\r\n\r\n.progress-mid {\r\n    -webkit-animation: progress 1s linear infinite;\r\n    -moz-animation: progress 1s linear infinite;\r\n    animation: progress 1s linear infinite;\r\n    background-repeat: repeat-x;\r\n    background-size: 30px 30px;\r\n    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);\r\n    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);\r\n    background-color: #ea8209;\r\n    box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);\r\n}\r\n\r\n.progress-average {\r\n    -webkit-animation: progress 1s linear infinite;\r\n    -moz-animation: progress 1s linear infinite;\r\n    animation: progress 1s linear infinite;\r\n    background-repeat: repeat-x;\r\n    background-size: 30px 30px;\r\n    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);\r\n    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);\r\n    background-color: #00cb08;\r\n    box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);\r\n}\r\n.progress {\r\n    -webkit-animation: progress 1s linear infinite;\r\n    -moz-animation: progress 1s linear infinite;\r\n    animation: progress 1s linear infinite;\r\n    background-repeat: repeat-x;\r\n    background-size: 30px 30px;\r\n    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);\r\n    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);\r\n    background-color: CornflowerBlue;\r\n    box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);\r\n}\r\n@-webkit-keyframes progress {\r\n    to {\r\n        background-position: 30px 0;\r\n    }\r\n}\r\n\r\n@-moz-keyframes progress {\r\n    to {\r\n        background-position: 30px 0;\r\n    }\r\n}\r\n\r\n@keyframes progress {\r\n    to {\r\n        background-position: 30px 0;\r\n    }\r\n}<\/pre>\n<p>4.- Ahora en JavaScript vamos a modificar el archivo original para agregar las clases al elemento dependiendo del porcentaje que se maneje, la funci\u00f3n recibe el numero (porcentaje) y el elemento div con el ID \u00abprogress\u00bb.<\/p>\n<pre class=\"lang:js decode:true \" title=\"funcion para agregar las clases\">function progressBar(percent, element) {\r\n    var progress = element.find('div');\r\n    progress.removeClass();\r\n    if (percent &lt;= 25)\r\n        progress.addClass('progress-min');\r\n    else if (percent &lt;= 50 &amp; percent &gt; 25)\r\n        progress.addClass('progress-mid');\r\n    else if (percent &lt;= 75 &amp; percent &gt; 50)\r\n        progress.addClass('progress-average');\r\n    else if (percent &gt; 75)\r\n        progress.addClass('progress');\r\n    progress.animate({ width: percent + '%' }, 500).html(percent + \"%&amp;nbsp;\");\r\n}<\/pre>\n<p>Eso seria todo, un ejemplo completo:<br \/>\n<iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/fiddle.jshell.net\/bgdos\/bzqs1guy\/1\/embedded\/js,html,css,result\/dark\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>Aqui otro ejemplo con imagenes de fondo en lugar de los colores y la animaci\u00f3n.<br \/>\n<iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"\/\/fiddle.jshell.net\/bgdos\/bzqs1guy\/3\/embedded\/js,html,css,result\/dark\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>El siguiente ejemplo est\u00e1 basado en el trabajo realizado por Lazarevic Ivan, se agregan algunas cosas para que cambie de color dependiendo del valor que se le d\u00e9 a la barra de progreso, para realizarlo utiliza jQuery aunque se puede omitir utilizando solo JavaScript. 1.- Agregamos las etiquetas HTML a nuestro proyecto. &lt;div id=\u00bbprogress\u00bb&gt; &lt;div&gt;&lt;\/div&gt; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":53,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[7,8,4,10],"class_list":["post-54","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","tag-css","tag-html","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/jssoftware.pe.hu\/blog\/wp-json\/wp\/v2\/posts\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jssoftware.pe.hu\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jssoftware.pe.hu\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jssoftware.pe.hu\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jssoftware.pe.hu\/blog\/wp-json\/wp\/v2\/comments?post=54"}],"version-history":[{"count":10,"href":"https:\/\/jssoftware.pe.hu\/blog\/wp-json\/wp\/v2\/posts\/54\/revisions"}],"predecessor-version":[{"id":76,"href":"https:\/\/jssoftware.pe.hu\/blog\/wp-json\/wp\/v2\/posts\/54\/revisions\/76"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jssoftware.pe.hu\/blog\/wp-json\/wp\/v2\/media\/53"}],"wp:attachment":[{"href":"https:\/\/jssoftware.pe.hu\/blog\/wp-json\/wp\/v2\/media?parent=54"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jssoftware.pe.hu\/blog\/wp-json\/wp\/v2\/categories?post=54"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jssoftware.pe.hu\/blog\/wp-json\/wp\/v2\/tags?post=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}