Descripción general del progreso circular Blazor

    El componente Indicador de progreso circular Ignite UI for Blazor 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.

    Ejemplo de progreso circular Blazor

    EXAMPLE
    MODULES
    RAZOR
    CSS

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

    Uso

    Antes de utilizar IgbCircularProgress, debe registrarlo de la siguiente manera:

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule));
    razor

    También deberá vincular un archivo CSS adicional para aplicar el estilo al componente IgbCalendar. Es necesario colocar lo siguiente en el archivo wwwroot/index.html de un proyecto Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
    razor
    <IgbCircularProgress Value=100/>
    razor

    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.

    <IgbCircularProgress Value=100 Variant=@ProgressBaseVariant.Success  />
    razor

    Progreso indeterminado

    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 Blazor IgbCircularProgress configurando la propiedad hideLabel y personalizando la etiqueta predeterminada del indicador de progreso mediante la propiedad labelFormat expuesta.

    <IgbCircularProgress Value=100 Indeterminate=true/>
    razor

    El siguiente ejemplo demuestra la configuración anterior:

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Duración de la animación

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

    <IgbCircularProgress AnimationDuration=5000 Indeterminate=true />
    razor

    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 IgbCircularGradient que define las paradas del degradado.

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Para cada IgbCircularGradient definido como ranura de gradiente de Ignite UI for Blazor IgbCircularProgress, se crearía un elemento de parada SVG. Los valores pasados como color, desplazamiento y opacidad se establecerían como color de parada, desplazamiento y opacidad de parada del elemento SVG sin validaciones adicionales.

    <IgbCircularProgress>
        <IgbCircularGradient slot="gradient" Offset="0%"   Color="#ff9a40"/>
        <IgbCircularGradient slot="gradient" Offset="50%"  Color="#1eccd4"/>
        <IgbCircularGradient slot="gradient" Offset="100%" Color="#ff0079"/>
    </IgbCircularProgress>
    razor

    Estilo

    El componente Ignite UI for Blazor Circular Procress Indicator expone partes CSS para casi todos sus elementos internos.

    EXAMPLE
    MODULES
    RAZOR
    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