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.
Blazor Circular Progress Example
Usage
Antes de utilizar IgbCircularProgress
, debe registrarlo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule));
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" />
<IgbCircularProgress Value=100/>
Progress Types
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 />
Indeterminate Progress
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/>
El siguiente ejemplo demuestra la configuración anterior:
Animation Duration
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 />
Gradient Progress
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.
[!Note] For each
IgbCircularGradient
defined as gradient slot of Ignite UI for BlazorIgbCircularProgress
a SVG stop element would be created. The values passed ascolor
,offset
andopacity
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
El componente Ignite UI for Blazor Circular Procress Indicator expone partes CSS para casi todos sus elementos internos.
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. |