Blazor Resumen del Progreso Circular

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

    Blazor Circular Progress Example

    Usage

    Antes de usarlosIgbCircularProgress, debes registrarlo de la siguiente manera:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule));

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbCalendar componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

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

    <IgbCircularProgress Value=100/>

    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.

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

    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 BlazorIgbCircularProgress configurando laHideLabel propiedad y personalizando la etiqueta predeterminada del indicador de progreso mediante la propiedad expuestaLabelFormat.

    <IgbCircularProgress Value=100 Indeterminate=true/>

    El siguiente ejemplo demuestra la configuración anterior:

    Animation Duration

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

    <IgbCircularProgress AnimationDuration=5000 Indeterminate=true />

    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 queIgbCircularGradient define los parados del degradado.

    [!Note] For each IgbCircularGradient defined as gradient slot of Ignite UI for Blazor IgbCircularProgress 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.

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

    Styling

    ElIgbCircularProgress 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