React Circular Progress Overview

    El componente Ignite UI for React Indicador de Progreso Circular 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.

    React Circular Progress Example

    Usage

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Luego tendrás que importar elIgrCircularProgress CSS necesario y registrar su módulo, así:

    import { IgrCircularProgressModule, IgrCircularProgress } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCircularProgressModule.register();

    <IgrCircularProgress value="100"></IgrCircularProgress>

    Progress Types

    Puedes establecer el tipo de tu indicador usando elvariant atributo. Hay cinco tipos de indicadores circulares de progreso: primario (por defecto), error, éxito, información y advertencia.

    <IgrCircularProgress value="100" variant="success"></IgrCircularProgress>

    Indeterminate Progress

    Si quieres rastrear un proceso que no está determinado con precisión, puedes establecer laindeterminate propiedad. Además, puedes ocultar la etiqueta predeterminada del Ignite UI for ReactIgrCircularProgress configurando lahideLabel propiedad y personalizando la etiqueta predeterminada del indicador de progreso mediante la propiedad expuestalabelFormat.

    <IgrCircularProgress value="100" indeterminate="true"></IgrCircularProgress>

    El siguiente ejemplo demuestra la configuración anterior:

    Animation Duration

    Puedes usar laanimationDuration propiedad delIgrCircularProgress componente para especificar cuánto debe durar el ciclo de animación en milisegundos.

    <IgrCircularProgress animationDuration="5000" indeterminate="true"></IgrCircularProgress>

    Gradient Progress

    Personalizar la barra de progreso para usar un degradado de color en lugar de un color sólido podría hacerse mediante la ranura expuestagradient queIgrCircularGradient define los parados del degradado.

    [!Note] For each IgrCircularGradient defined as gradient slot of Ignite UI for React IgrCircularProgress 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.

    <IgrCircularProgress >
    <IgrCircularGradient slot="gradient" offset="0%" color="#ff9a40">
    </IgrCircularGradient>
    <IgrCircularGradient slot="gradient" offset="50%" color="#1eccd4">
    </IgrCircularGradient>
    <IgrCircularGradient slot="gradient" offset="100%" color="#ff0079">
    </IgrCircularGradient>
</IgrCircularProgress>

    Styling

    ElIgrCircularProgress componente expone partes CSS para casi todos sus elementos internos:

    Nombre Descripción
    svg El elemento SVG de progreso.
    gradient_start El color inicial del gradiente lineal de progreso.
    gradient_end El color final del gradiente lineal de progreso.
    track El área de seguimiento del anillo de progreso.
    fill El área del indicador de progreso.
    label La etiqueta de progreso.
    value El valor de la etiqueta de progreso.
    indeterminate El progreso en estado indeterminado.
    primary El indicador de progreso del estado primario.
    danger El estado de error del indicador de progreso.
    warning El estado de advertencia del indicador de progreso.
    info El estado de información del indicador de progreso.
    success El estado de éxito del indicador de progreso.

    Usando estas partes de CSS, tenemos un control casi total sobre el estilo de Circular Progress.

    
igc-circular-progress {
  margin: 20px;
  --diameter: 50px;
}

igc-circular-progress::part(gradient_end),
igc-circular-progress::part(gradient_start) {
  stop-color: var(--ig-success-200);
}

igc-circular-progress::part(track) {
  stroke: var(--ig-gray-400);
}

    API References

    Additional Resources