Indicadores de progreso
El indicador de progreso se emplea para mostrar el porcentaje completado de una operación. Puede hacer referencia a una tarea del sistema o del usuario.
- HTML
- JS
<progress id="bp" class="ulpgcds-progressbar bg-bar" value="8" max="10">
<span>Progreso: <span class="pval">8</span>/10</strong></span>
</progress>
<div class="ulpgcds-radial-progress" data-progress="0">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="percentage"></div>
</div>
</div> // Se deberá modificar los valores de los atributes "value" y "max" según la programación que se está llevando a cabo
window.aumentando = function() {
if ($('.ulpgcds-progressbar').length){
var progress = parseInt($('.ulpgcds-progressbar').attr('value'));
if (progress === 10){
$('.ulpgcds-progressbar').attr('value', 0);
}
else{
$('.ulpgcds-progressbar ').attr('value', progress+1);
}
}
}
setInterval(window.aumentando, 500); Variantes
Con fondo oscuro
- HTML
- JS
<progress id="bp" class="ulpgcds-progressbar ulpgcds-progressbar--reverse bg-bar" value="8" max="10">
<span>Progreso: <span class="pval">8</span>/10</strong></span>
</progress>
<div class="ulpgcds-radial-progress ulpgcds-radial-progress--reverse " data-progress="0">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="percentage"></div>
</div>
</div> // Se deberá modificar los valores de los atributes "value" y "max" según la programación que se está llevando a cabo
window.aumentando = function() {
if ($('.ulpgcds-radial-progress')){
var progress = parseInt($('.ulpgcds-radial-progress').attr('data-progress'));
if (progress === 100){
$('.ulpgcds-radial-progress').attr('data-progress', 0);
}
else{
$('.ulpgcds-radial-progress').attr('data-progress', progress+5);
}
}
if ($('.ulpgcds-progressbar').length){
var progress = parseInt($('.ulpgcds-progressbar').attr('value'));
if (progress === 10){
$('.ulpgcds-progressbar').attr('value', 0);
}
else{
$('.ulpgcds-progressbar ').attr('value', progress+1);
}
}
}
setInterval(window.aumentando, 500); Uso del componente
Con el objetivo de facilitar la visualización del estado del sistema al usuario en todo momento (uno de los principales pilares de la usabilidad web), es necesario contar con elementos que muestren que una acción esta en proceso cuando el resultado no es inmediato.
En el caso en el que no se pueda determinar el tiempo de respuesta del sistema, se debería emplear el indicador de carga.
Por defecto debería emplear el indicador de progreso lineal.
Estilos CSS
Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.
| Selector CSS | Descripción |
|---|---|
| .ulpgcds-progressbar | Aplica los estilos de la barra de progreso |
| .ulpgcds-radial-progress | Activa los estilos de la versión radial |
| .ulpgcds-progressbar--reverse | Aplica los estilos de la barra de progreso con fondo distinto de blanco |
| .ulpgcds-radial-progress--reverse | Activa los estilos de la versión radial con fondo distinto de blanco |
Diseño
En esta sección se pueden ver los aspectos que presenta el componente para las diferentes pseudoclases relativas a la interacción con el mismo. Estos estilos siguen los mismos patrones de interacción que el resto de los componentes del Design System, por lo que su modificación puede afectar a la consistencia del sistema y a la experiencia de los usuarios.
