Progreso

Aquí tienes la traducción del archivo fuente de la guía de diseño al español, manteniendo un tono natural y conservando los componentes MDX, bloques de código y términos técnicos:

Este es un componente para incrustar un gráfico de barras horizontal en diversas interfaces. Puede mostrar la distribución de datos, la participación o el progreso.

§Casos de uso

✅ Cuándo usarlo Úsalo cuando necesites mostrar el nivel de finalización o llenado de una entidad, como espacio libre en el disco, el número de tareas completadas, etc.

🚫 Cuándo no usarlo Cuando necesites mostrar un valor único sin comparación. Por ejemplo, puedes usar Progress para mostrar 15/60, pero no solo 15.

§Estructura

1. Color del indicador. Parte requerida.
2. Texto. Úsalo solo con tamaño M, parte opcional.
3. Fondo. Parte requerida.

§Tamaños

1. M es el único tamaño que tiene texto. Úsalo en secciones con mucho espacio, en páginas donde el indicador de progreso sea el elemento clave.
2. S se usa en tablas, tarjetas y por separado, donde el progreso no es el único componente clave en la página.
3. XS se usa en lugares estrechos, donde necesitas mantener tu contenido compacto.

§Temas

Default se usa con mayor frecuencia para casos neutrales, cuando no necesitas llamar la atención adicional sobre el progreso, por ejemplo, cuando la página incluye elementos más importantes.

Info también se usa para casos neutrales, donde necesitas poner más énfasis en el progreso, o para mostrar que una operación está en curso.

Success se usa para procesos completados con éxito o para indicar que el sistema está funcionando sin problemas.

Warning se usa en situaciones inusuales para advertir al usuario sobre algo, por ejemplo, para llamar la atención del usuario sobre un problema inminente.

Danger se usa para atraer la máxima atención, cuando ha ocurrido un error y el usuario necesita tomar medidas para resolver el problema: se ha agotado el espacio en disco, ha fallado el sistema, etc.

Misc se usa en casos neutrales, cuando no quieres usar Default.

§Alcance

1. Cambio de color según el valor del progreso. Puedes configurar este componente para que cambie de color según el valor del progreso; por ejemplo, la indicación estándar es azul (info), y el 100% es verde (success).

   

2. Animación de carga. Úsala para mostrar el progreso en tiempo real al usuario, por ejemplo, al subir archivos desde un ordenador.

   

3. Colores personalizados. Puedes usar tu propio conjunto de colores para Progress cuando todas las demás opciones no se ajustan: usa un color personalizado y combina varios colores.

   

§Casos de uso

Puedes combinar este componente con texto, incrustarlo en otros componentes, por ejemplo, envolver Progress en una tarjeta o tabla, combinarlo con texto explicativo, acciones, etc.

1. En secciones con carga/descarga de archivos.

   

2. En tarjetas, por ejemplo, en una lista de verificación de incidencias.

   

3. En tablas, por ejemplo, para mostrar el uso del disco.