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 usá-losIgbCircularProgress, você precisa registrá-los 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 aoIgbCalendar componente. O seguinte deve 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" />

    A maneira mais simples de começar a usar oIgbCircularProgress é a seguinte:

    <IgbCircularProgress Value=100/>

    Progress Types

    Você pode definir o tipo do seu indicador, usando oVariant atributo. Existem cinco tipos de indicadores circulares de progresso -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 está determinado com precisão, pode definir aIndeterminate propriedade. Além disso, você pode ocultar o rótulo padrão do Ignite UI for BlazorIgbCircularProgress definindo aHideLabel propriedade e personalizando o rótulo padrão do indicador de progresso via a propriedade expostaLabelFormat.

    <IgbCircularProgress Value=100 Indeterminate=true/>

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

    Animation Duration

    Você pode usar aAnimationDuration propriedade doIgbCircularProgress componente para especificar quanto tempo o ciclo de animação deve durar em milissegundos.

    <IgbCircularProgress AnimationDuration=5000 Indeterminate=true />

    Gradient Progress

    Personalizar a barra de progresso para usar um gradiente de cor em vez de uma cor sólida poderia ser feito pelo slot expostogradient, queIgbCircularGradient define os parados 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

    OIgbCircularProgress componente expõe partes CSS para quase todos os seus elementos internos:

    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.

    Usando essas partes CSS, temos controle quase total sobre o estilo do Progresso Circular.

    
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