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 Ejemplo de Progreso Circular

    EXAMPLE
    TS
    HTML
    CircularProgressStyle.css
    index.css

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

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

    npm install igniteui-webcomponents
    cmd

    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);
    ts

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

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

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

    Tipos de progreso

    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>
    html

    Progreso indeterminado

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

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

    El siguiente ejemplo demuestra la configuración anterior:

    EXAMPLE
    TS
    HTML
    IndeterminateCircularProgressStyle.css
    index.css

    Duración de la animación

    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>
    html

    Progreso del gradiente

    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.

    EXAMPLE
    TS
    HTML
    DynamicCircularProgressStyle.css
    index.css

    Para cada IgcCircularGradientComponent definido como ranura de gradiente de Ignite UI for Web Components IgcCircularProgressComponent se crearía un elemento de parada SVG. Los valores pasados como color, desplazamiento y opacidad se establecerían como stop-color, offset y stop-opacity del elemento SVG sin más validaciones.

    <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>
    html
    Ignite UI for Web Components | CTA Banner

    Estilo

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

    EXAMPLE
    TS
    HTML
    CircularProgressStyling.css
    index.css

    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.

    Referencias de API

    Recursos adicionales