6

Estoy buscando codigo para realizar una barra de progreso. Entre los que vi encontré este ejemplo que me gusto, y dentro del html encontre un atributo data-percentage particular. Al borrarlo no pasa nada porque quien cambia la apariencia de la barra es width. ¿Para que sirve exactamente ese atributo?

.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.progress {
background-image: -webkit-gradient(linear,left 0,left 100%,from(#ebebeb),to(#f5f5f5));
background-image: -webkit-linear-gradient(top,#ebebeb 0,#f5f5f5 100%);
background-image: -moz-linear-gradient(top,#ebebeb 0,#f5f5f5 100%);
background-image: linear-gradient(to bottom,#ebebeb 0,#f5f5f5 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb',endColorstr='#fff5f5f5',GradientType=0);
}
.progress {
height: 12px;
background-color: #ebeef1;
background-image: none;
box-shadow: none;
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #428bca;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
-webkit-transition: width .6s ease;
transition: width .6s ease;
}
.progress-bar {
background-image: -webkit-gradient(linear,left 0,left 100%,from(#428bca),to(#3071a9));
background-image: -webkit-linear-gradient(top,#428bca 0,#3071a9 100%);
background-image: -moz-linear-gradient(top,#428bca 0,#3071a9 100%);
background-image: linear-gradient(to bottom,#428bca 0,#3071a9 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca',endColorstr='#ff3071a9',GradientType=0);
}
.progress-bar {
box-shadow: none;
border-radius: 3px;
background-color: #0090D9;
background-image: none;
-webkit-transition: all 1000ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
-moz-transition: all 1000ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
-ms-transition: all 1000ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
-o-transition: all 1000ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
transition: all 1000ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
-webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
-moz-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
-ms-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
-o-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
}
.progress-bar-success {
background-image: -webkit-gradient(linear,left 0,left 100%,from(#5cb85c),to(#449d44));
background-image: -webkit-linear-gradient(top,#5cb85c 0,#449d44 100%);
background-image: -moz-linear-gradient(top,#5cb85c 0,#449d44 100%);
background-image: linear-gradient(to bottom,#5cb85c 0,#449d44 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c',endColorstr='#ff449d44',GradientType=0);
}
.progress-bar-success {
background-color: #0AA699;
background-image: none;
}
<div class="container">
	<div class="row">
		<div class="col-md-4">
                  <h3>Progess bar <span class="semi-bold">Colors</span></h3>
                  <p>Progress bars comes with customized colors and transparent background that would fit any colored widget or portlet</p>
                  <br>
                  <div class="col-md-11">
                    <div class="progress">
                      <div data-percentage="0%" style="width: 50%;" class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                </div>
	</div>
</div>

2 respuestas 2

12

Antes de HTML5 si el desarrollador quería almacenar metadatos relacionados con la información de una etiqueta debía usar atributos como rel o class, posiblemente con un nombre particular para que, usando Javascript, se pudieran realizar acciones sobre estos elementos.

Desde HTML5 todos los atributos cuyo nombre comienza por data-* en los elementos se llaman atributos de datos y se usan para almacenar información con contenido semántico para el elemento. Por ejemplo:

<li data-id="123" data-correo="[email protected]" data-edad="24">Daniel</li>

crea un elemento de una lista. En el navegador sólamente se verá la palabra 'Daniel', pero gracias a los atributos id (por data-id), correo (por data-correo) y edad (por data-edad) es posible añadir información semántica al nombre que puede usarse para crear aplicaciones web, haciendo uso de Javascript o CSS con la API correspondiente.

De acuerdo a la especificación de HTML5, estos atributos personalizados pueden ser considerados como un área especial de almacenamiento de información privada (privada en el sentido que el usuario no ve esta información y habitualmente no afecta la presentación. Para el caso del elemento de la lista anterior, podría pensarse que todos los elementos de tipo li en una lista poseen cada uno tres atributos: un id, un correo y una edad. A partir de estos, y usando Javascript podría ser posible, por ejemplo, crear funcionalidades para ordenar los items de la lista por la edad (obteniendo todos los atributos de edad de los elementos de la lista), o filtrar los items que coincidan con un correo electrónico en particular.

Para el elemento div que servirá para encapsular la barra de progreso, el elemento data-percentage puede usarse para almacenar el valor correspondiente al porcentaje de la barra de progreso que se ha completado. La presentación de la misma (o la cantidad de color que indica qué tan 'llena' está la barra) es responsabilidad de los estilos que anexas, y, usando Javascript, podría alterar qué tan llena quiero que la barra se muestre en pantalla alterando el valor de este atributo data-percentage, de tal manera que se permita cierta interactividad con la barra, por ejemplo. En el caso que menciona, si elimina el atributo no ocurrirá nada porque no hay código que lea o altere este valor y la presentación de la hoja de estilos que anexa no hace uso de este atributo en particular para dibujar la porción de la barra de progreso que debe mostrar como completa.

1
  • Muchas gracias eres un Crack !
    – demepty
    el 1 abr. 2018 a las 3:49
0

Si entre las etiquetas <head></head> llamas a JQuery y luego al final de tu documento HTML justo antes del </body> agregas el siguiente código.

jQuery(document).ready(function(){
    jQuery('.skillbar').each(function(){
        jQuery(this).find('.skillbar-bar').animate({
            width:jQuery(this).attr('data-percent')
        },6000);
    });
});

La barra de progreso adquiere una animación. Como puedes ver en este caso se usa para poder manipular esos elementos desde Javascript.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.