Progreso

    Utilice el componente Progreso para establecer claridad y expectativas sobre la progresión y finalización de una tarea que tarda más en finalizar. También funciona muy bien para escenarios donde no se conoce el tiempo exacto de finalización y cuando hay un flujo de trabajo mayor, 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 Progreso es visualmente idéntico a la Ignite UI for Angular y 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 hacer esto desde la propiedad en la Value 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 panel y soltarla encima de la Progress Amount capa para cambiar el Libraries valor predeterminado.

    Stripes

    Cuando se utiliza una forma de diseño de barra lineal para el componente Progreso, vendrá con una opción adicional para franjas sobre el área de relleno. Para eliminar las rayas, simplemente use la propiedad booleana en Figma o establezca la Striped anulación de 🌈 Stripes color en Sketch en 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.