Indicadores de carga
Indicador de carga básico
El indicador de carga se emplea para acciones en las que el tiempo de respuesta del sistema es indeterminado. Por ejemplo, para indicar que una página se está cargando.
- HTML
- JS
<div class="ulpgcds-loader" role="alert" aria-busy="true">
<svg viewBox="0 0 50 50" class="spinner-1">
<circle class="ring" cx="25" cy="25" r="22.5" />
<circle class="line" cx="25" cy="25" r="22.5" />
</svg>
</div>
Variantes
Indicador corporativo
- HTML
- JS
<div class="ulpgcds-loader" role="alert" aria-busy="true">
<svg viewBox="0 0 50 50" class="spinner-2">
<circle class="line" cx="25" cy="25" r="22.5" />
</svg>
<svg viewBox="0 0 50 50" class="ulpgcds-loader__logo">
<path id="ulpgc-logo" class="color-logo" d="M30.349,9.034c7.141,0,10.711,5.342,10.711,11.573c0.089,2.843,0,4.46,0,8.013h-2.678c0,0-2.353,5.076,1.785,8.012c0,0.178-15.262,5.021-18.745-9.793c0,0.177,7.891,4.982,12.496,3.561c0,0,1.795-6.645,0.461-10.665c-1.727-5.203-9.349-3.744-12.952-1.655C12.472,23.273,9.633,31.325,6.248,37.523C6.248,37.523,8.47,9.034,30.349,9.034"/>
</svg>
</div> - HTML
- JS
<div class="ulpgcds-loader" role="alert" aria-busy="true">
<svg viewBox="0 0 50 50" class="spinner-2">
<circle class="line" cx="25" cy="25" r="22.5" />
</svg>
<svg viewBox="0 0 50 50" class="ulpgcds-loader__logo ulpgcds-loader__logo--reverse">
<path id="ulpgc-logo2" class="color-logo" d="M30.349,9.034c7.141,0,10.711,5.342,10.711,11.573c0.089,2.843,0,4.46,0,8.013h-2.678c0,0-2.353,5.076,1.785,8.012c0,0.178-15.262,5.021-18.745-9.793c0,0.177,7.891,4.982,12.496,3.561c0,0,1.795-6.645,0.461-10.665c-1.727-5.203-9.349-3.744-12.952-1.655C12.472,23.273,9.633,31.325,6.248,37.523C6.248,37.523,8.47,9.034,30.349,9.034"/>
</svg>
</div> 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.
Para conseguir esto, se puede emplear el indicador de carga. Con su uso se informa al usuario de que el sistema ha recibido su petición y esta en proceso de cargar una respuesta.
Utilice el indicador corporativo para la carga de páginas completas. Para la carga de secciones o vistas de la interfaz, emplee el indicador básico.
Estilos CSS
Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.
| Selector CSS | Descripción |
|---|---|
| .ulpgcds-loader | Aplica los estilos para el indicador de carga básico |
| .ulpgcds-loader__logo | Aplica los estilos para la versión con logo |
| .ulpgcds-loader__logo--reverse | Aplica los estilos para la versión con logo con fondo de color 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.
