Generador de Indicador de Carga en SVG

SVG es un formato vectorial, por lo que los giradores permanecen perfectamente nítidos en cualquier tamaño y en cualquier densidad de píxeles. Los tamaños de archivo son pequeños (a menudo unos pocos bytes), los colores pueden cambiarse mediante CSS en tiempo real, y la animación puede pausarse, reanudarse o reestilizarse sin re-encodear el recurso. Los GIFs, en cambio, son de tipo raster, más grandes, con pérdida de calidad en los bordes y están fijos a los colores y velocidad que se establecieron al exportar el archivo.

Un indicador determinado muestra progreso real hacia un total conocido, como una barra de progreso que se llena desde 0% hasta 100%. Un indicador indeterminado simplemente informa al usuario de que se está trabajando cuando no se puede medir el tiempo o el progreso — por ejemplo, mientras se espera una respuesta de red. La mayoría de los giradores (círculos giratorios, puntos pulsantes, ondas) son indeterminados; los cargadores en barra pueden ser cualquiera, dependiendo de si muestran una sección en movimiento o una fracción de llenado.

Como guía general de usabilidad, no muestre ningún indicador para acciones que duren menos de unos 100 ms — la interfaz se siente inmediata. Entre 100 ms y 1 segundo, un indicador pequeño en línea cerca del control afectado es suficiente. Después de 1 segundo, use un girador claro. Para esperas superiores a unos 10 segundos, cambie a un indicador de progreso determinado con un mensaje significativo, porque los usuarios empiezan a perder confianza de que el sistema sigue funcionando.

Las animaciones CSS dirigen elementos SVG de la misma manera que dirigen elementos HTML: escriba una regla de keyframes y aplíquela mediante la propiedad animation en una clase. Los objetivos comunes incluyen transformaciones de rotación para giros, opacidad para desvanecimientos y stroke-dashoffset para el efecto de dibujo en círculos y líneas. Para que la rotación gire en el centro visual de una forma, establezca transform-origin en ese punto. Las animaciones declaradas dentro de un elemento style dentro del SVG mismo permanecen en el ámbito de ese documento, lo que explica por qué un SVG autónomo funciona cuando se coloca en cualquier página.

Marque el elemento del girador con role=status (o role=progressbar para progreso determinado) para que las tecnologías de asistencia traten las actualizaciones como una región en vivo. Proporcione un etiqueta breve y significativa como Cargando o Guardando para que el propósito se anuncie, y evite depender únicamente del color para transmitir el estado. Para progreso determinado, también establezca aria-valuenow, aria-valuemin y aria-valuemax para que el porcentaje se anuncie mientras se actualiza.