Visão geral do progresso circular Web Components

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

    Web Components Circular Progress Example

    Usage

    Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

    Você precisará então importar o IgcCircularProgressComponent, seu CSS necessário e registrar seu módulo, assim:

    import {defineComponents, IgcCircularProgressComponent} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcCircularProgressComponent);

    Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

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

    <igc-circular-progress value="100"></igc-circular-progress>

    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.

    <igc-circular-progress value="100" variant="success"></igc-circular-progress>

    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 do Ignite UI for Web Components IgcCircularProgressComponent definindo a propriedade hideLabel e personalizar o rótulo padrão do indicador de progresso por meio da propriedade labelFormat exposta.

    <igc-circular-progress value="100" indeterminate="true"></igc-circular-progress>

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

    Animation Duration

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

    <igc-circular-progress animation-duration="5000" indeterminate></igc-circular-progress>

    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 IgcCircularGradientComponent, que define as paradas do gradiente.

    [!Note] For each IgcCircularGradientComponent defined as gradient slot of Ignite UI for Web Components IgcCircularProgressComponent 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.

    <igc-circular-progress>
    <igc-circular-gradient slot="gradient" offset="0%" color="#ff9a40"></igc-circular-gradient>
    <igc-circular-gradient slot="gradient" offset="50%" color="#1eccd4"></igc-circular-gradient>
    <igc-circular-gradient slot="gradient" offset="100%" color="#ff0079"></igc-circular-gradient>
</igc-circular-progress>

    Styling

    The IgcCircularProgressComponent 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