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

    Before using the IgbCircularProgress, you need to register it as follows:

    // in Program.cs file

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

    You will also need to link an additional CSS file to apply the styling to the IgbCalendar component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

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

    <IgbCircularProgress Value=100/>

    Progress Types

    You can set the type of your indicator, using the Variant attribute. There are five types of circular progress indicators - primary (default), error, success, info, and warning.

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

    Indeterminate Progress

    If you want to track a process that is not determined precisely, you can set the Indeterminate property. Also, you can hide the default label of the Ignite UI for Blazor IgbCircularProgress by setting the HideLabel property and customize the progress indicator default label via the exposed LabelFormat property.

    <IgbCircularProgress Value=100 Indeterminate=true/>

    El siguiente ejemplo demuestra la configuración anterior:

    Animation Duration

    You can use the AnimationDuration property on the IgbCircularProgress component to specify how long the animation cycle should take in milliseconds.

    <IgbCircularProgress AnimationDuration=5000 Indeterminate=true />

    Gradient Progress

    Customizing the progress bar in order to use a color gradient instead of a solid color could be done via the exposed gradient slot and IgbCircularGradient which defines the gradient stops.

    [!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

    The IgbCircularProgress component exposes CSS parts for almost all of its inner elements:

    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