Descripción general del progreso circular Web Components

    El componente Indicador de progreso circular Ignite UI for Web Components proporciona un indicador visual del proceso de una aplicación a medida que cambia. El indicador circular actualiza su apariencia a medida que cambia su estado.

    Web Components Circular Progress Example

    Usage

    Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    Luego necesitarás importar IgcCircularProgressComponent, su CSS necesario y registrar su módulo, así:

    import {defineComponents, IgcCircularProgressComponent} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcCircularProgressComponent);

    Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.

    La forma más sencilla de empezar a utilizarlo IgcCircularProgressComponent es la siguiente:

    <igc-circular-progress value="100"></igc-circular-progress>

    Progress Types

    Puede establecer el tipo de su indicador utilizando el atributo variant. Hay cinco tipos de indicadores de progreso circulares: primario (predeterminado), error, éxito, información y advertencia.

    <igc-circular-progress value="100" variant="success"></igc-circular-progress>

    Indeterminate Progress

    Si desea realizar un seguimiento de un proceso que no está determinado con precisión, puede establecer la propiedad indeterminate. Además, puede ocultar la etiqueta predeterminada de la Ignite UI for Web Components IgcCircularProgressComponent configurando la propiedad hideLabel y personalizando la etiqueta predeterminada del indicador de progreso mediante la propiedad labelFormat expuesta.

    <igc-circular-progress value="100" indeterminate="true"></igc-circular-progress>

    El siguiente ejemplo demuestra la configuración anterior:

    Animation Duration

    Puede utilizar la propiedad animationDuration en el componente IgcCircularProgressComponent para especificar cuánto tiempo debe durar el ciclo de animación en milisegundos.

    <igc-circular-progress animation-duration="5000" indeterminate></igc-circular-progress>

    Gradient Progress

    Se puede personalizar la barra de progreso para usar un degradado de color en lugar de un color sólido a través de la ranura gradient expuesta y IgcCircularGradientComponent que define las paradas del degradado.

    [!Note] For each IgcCircularGradientComponent defined as gradient slot of Ignite UI for Web Components IgcCircularProgressComponent a SVG stop element would be created. The values passed as color, offset and opacity would be set as stop-color, offset and stop-opacity of the SVG element without further validations.

    <igc-circular-progress>
    <igc-circular-gradient slot="gradient" offset="0%" color="#ff9a40"></igc-circular-gradient>
    <igc-circular-gradient slot="gradient" offset="50%" color="#1eccd4"></igc-circular-gradient>
    <igc-circular-gradient slot="gradient" offset="100%" color="#ff0079"></igc-circular-gradient>
</igc-circular-progress>

    Styling

    El componente Indicador de proceso circular Ignite UI for Web Components expone partes CSS para casi todos sus elementos internos.

    La siguiente tabla enumera todas las partes CSS expuestas por Circular Progress:

    Nombre Descripción
    svg El elemento SVG de progreso.
    inicio_gradiente El color inicial del gradiente lineal de progreso.
    gradiente_end El color final del gradiente lineal de progreso.
    pista El área de seguimiento del anillo de progreso.
    llenar El área del indicador de progreso.
    etiqueta La etiqueta de progreso.
    valor El valor de la etiqueta de progreso.
    indeterminado El progreso en estado indeterminado.
    primario El indicador de progreso del estado primario.
    peligro El estado de error del indicador de progreso.
    advertencia El estado de advertencia del indicador de progreso.
    información El estado de información del indicador de progreso.
    éxito El estado de éxito del indicador de progreso.

    API References

    Additional Resources