Web Components Resumen del Progreso Circular

    El componente Ignite UI for Web Components 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.

    Web Components Circular Progress Example

    Usage

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

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

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

defineComponents(IgcCircularProgressComponent);

    Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

    La forma más sencilla de empezar a usar elIgcCircularProgressComponent uso es la siguiente:

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

    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.

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

    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 Web ComponentsIgcCircularProgressComponent configurando lahideLabel propiedad y personalizando la etiqueta predeterminada del indicador de progreso mediante la propiedad expuestalabelFormat.

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

    El siguiente ejemplo demuestra la configuración anterior:

    Animation Duration

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

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

    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 queIgcCircularGradientComponent define los parados 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

    ElIgcCircularProgressComponent 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