Visão geral do progresso circular Blazor

    O componente Ignite UI for Blazor Circular Progress Indicator fornece um indicador visual do processo de um aplicativo conforme ele muda. O indicador circular atualiza sua aparência conforme seu estado muda.

    Blazor Circular Progress Example

    Usage

    Antes de usar o IgbCircularProgress, você precisa registrá-lo da seguinte forma:

    // in Program.cs file

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

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao componente IgbCalendar. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

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

    <IgbCircularProgress Value=100/>

    Progress Types

    Você pode definir o tipo do seu indicador usando o atributo variant. Existem cinco tipos de indicadores de progresso circulares -primário (padrão), erro, sucesso, informação e aviso.

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

    Indeterminate Progress

    Se você quiser rastrear um processo que não é determinado precisamente, você pode definir a propriedade indeterminate. Além disso, você pode ocultar o rótulo padrão da Ignite UI for Blazor IgbCircularProgress definindo a propriedade hideLabel e personalizar o rótulo padrão do indicador de progresso por meio da propriedade labelFormat exposta.

    <IgbCircularProgress Value=100 Indeterminate=true/>

    O exemplo a seguir demonstra a configuração acima:

    Animation Duration

    Você pode usar a propriedade animationDuration no componente IgbCircularProgress para especificar quanto tempo o ciclo de animação deve levar em milissegundos.

    <IgbCircularProgress AnimationDuration=5000 Indeterminate=true />

    Gradient Progress

    A personalização da barra de progresso para usar um gradiente de cor em vez de uma cor sólida pode ser feita por meio do slot gradient exposto e IgbCircularGradient, que define as paradas do gradiente.

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

    Nome Descrição
    svg O elemento SVG de progresso.
    gradient_start A cor inicial do gradiente linear de progresso.
    gradient_end A cor final do gradiente linear de progresso.
    track Área de trilha do anel de progresso.
    fill A área do indicador de progresso.
    label O rótulo de progresso.
    value O valor do rótulo de progresso.
    indeterminate O estado indeterminado do progresso.
    primary O indicador de progresso do estado primário.
    danger O estado de erro do indicador de progresso.
    warning O estado de alerta do indicador de progresso.
    info O estado das informações do indicador de progresso.
    success O estado de sucesso do indicador de progresso.

    Using this CSS parts we have almost full control over the Circular Progress styling.

    
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