React Circular Progress Overview

    O componente Ignite UI for React Indicador de Progresso Circular fornece um indicador visual do processo de uma aplicação conforme ela muda. O indicador circular atualiza sua aparência conforme seu estado muda.

    React Circular Progress Example

    Usage

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

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

    import { IgrCircularProgressModule, IgrCircularProgress } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCircularProgressModule.register();

    <IgrCircularProgress value="100"></IgrCircularProgress>

    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.

    <IgrCircularProgress value="100" variant="success"></IgrCircularProgress>

    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 ReactIgrCircularProgress definindo ahideLabel propriedade e personalizando o rótulo padrão do indicador de progresso via a propriedade expostalabelFormat.

    <IgrCircularProgress value="100" indeterminate="true"></IgrCircularProgress>

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

    Animation Duration

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

    <IgrCircularProgress animationDuration="5000" indeterminate="true"></IgrCircularProgress>

    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, queIgrCircularGradient define os parados do gradiente.

    [!Note] For each IgrCircularGradient defined as gradient slot of Ignite UI for React IgrCircularProgress 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.

    <IgrCircularProgress >
    <IgrCircularGradient slot="gradient" offset="0%" color="#ff9a40">
    </IgrCircularGradient>
    <IgrCircularGradient slot="gradient" offset="50%" color="#1eccd4">
    </IgrCircularGradient>
    <IgrCircularGradient slot="gradient" offset="100%" color="#ff0079">
    </IgrCircularGradient>
</IgrCircularProgress>

    Styling

    OIgrCircularProgress 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