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();

    The simplest way to start using the IgrCircularProgress is as follows:

    <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