Progreso

    Utilice el componente Progreso para establecer la claridad y la expectativa sobre la progresión y la finalización de una tarea que tarda más en finalizarse. También funciona muy bien para escenarios en los que no se conoce la hora exacta de finalización y cuando hay un flujo de trabajo más grande, que depende de la finalización de un conjunto de tareas más pequeñas, como el cumplimiento de pedidos o la carga/descarga de archivos. El componente de progreso es visualmente idéntico al componente de progreso lineal Ignite UI for Angular y al componente de progreso circular Ignite UI for Angular

    Progress Demo

    Shape and Type

    Los indicadores de progreso informan a los usuarios sobre el estado de los procesos en curso, como cargar una aplicación, enviar un formulario o guardar actualizaciones. Progress admite dos formas de diseño para adaptarse a la variedad de casos de uso y requisitos de diseño: una barra circular y una barra lineal. Cada uno de estos diseños viene con una selección adicional del tipo de progresión: Determinada e Indeterminada.

    • Los indicadores determinados muestran el progreso de una tarea o proceso que tiene una duración conocida o un tiempo de finalización esperado.
    • Los indicadores indeterminados muestran que un proceso está en marcha pero se desconoce el tiempo exacto o el progreso.

    State

    El Progress se puede utilizar en una de las siguientes combinaciones de colores preestablecidas:

    • Predeterminado: utilizando el color primario base de forma predeterminada
    • Información: utilizar el color del tema de info para mostrar el progreso.
    • Éxito: utilizar el color del tema success para mostrar el progreso.
    • Advertir: utilizar el color del tema warn para mostrar el progreso
    • Peligro: utilizar el color del tema para mostrar el error progreso

    Progress Amount

    Al utilizar un tipo determinado de progreso, puede seleccionar la cantidad de progreso entre seis opciones de porcentaje. En Figma puedes hacerlo desde la Value propiedad en la barra lateral derecha. En Sketch, esto se logra con Symbol Overrides para permitirle cambiar fácilmente entre ellos, mientras que en Adobe XD debe arrastrar la cantidad deseada desde el Libraries panel y soltarla encima de la Progress Amount capa para cambiar el valor predeterminado.

    Stripes

    Al utilizar una forma de diseño de barra lineal para el componente Progreso, vendrá con una opción adicional para Rayas sobre el área de relleno. Para eliminar las rayas, simplemente use la Striped propiedad booleana en Figma o establezca la anulación de 🌈 Stripes color en Sketch a transparent.

    Estilismo

    El componente Progress ofrece un alto grado de flexibilidad de estilo, con varias opciones para personalizar el color, el peso y la posición del texto. Además, los colores de Progreso, Base, Rayas, Relleno y Pista se pueden ajustar según sea necesario, lo que permite una integración perfecta en cualquier esquema de diseño.

    Usage

    En una barra circular, utilice siempre el valor real para la etiqueta de texto y, cuando agregue texto más elaborado en una barra lineal, proporcione su mejor estimación del estado de finalización de la tarea en tiempo/archivos restantes, en lugar de mostrar una cadena genérica. al usuario. Sin embargo, puede usar las variantes Indeterminadas para ambas barras para mostrar un Progreso sin un tiempo de finalización claro y seguro.

    Hacer No

    Additional Resources

    Tema relacionado:

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.