Visão geral do componente Progresso circular Angular

    O componente Ignite UI for Angular 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.

    Angular Circular Progress Example

    Getting Started with Ignite UI for Angular Circular Progress

    Para começar a usar o componente Ignite UI for Angular Circular Progress, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    O próximo passo é importar o IgxProgressBarModule no arquivo app.module.ts:

    // app.module.ts

...
import { IgxProgressBarModule } from 'igniteui-angular';
// import { IgxProgressBarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxProgressBarModule],
    ...
})
export class AppModule {}

    Como alternativa, a partir da 16.0.0, você pode importar o IgxCircularProgressBarComponent como uma dependência autônoma ou usar o token IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

    // home.component.ts

import { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular';
// import { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: `
    <igx-circular-bar
      [value]="100"
      [animate]="true"
      class="custom-size"
    ></igx-circular-bar>
  `,
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES],
  /* or imports: [IgxCircularProgressBarComponent] */
})
export class HomeComponent {}

    Agora que você importou o módulo Ignite UI for Angular Progress Bar ou as diretivas, você pode começar a usar o componente igx-circular-bar.

    Using the Angular Circular Progress

    Para entender melhor como tudo funciona, vamos criar um exemplo simples, como o da demonstração:

    <igx-circular-bar [value]="100" [animate]="true" class="custom-size"></igx-circular-bar>

    Depois disso, devemos ter o exemplo de demonstração no seu navegador.

    Note

    O igx-circular-bar emite o evento onProgressChanged que gera um objeto como este {currentValue: 65, previousValue: 64} em cada etapa.

    Note

    O progresso padrão incrementa em 1% do valor max​ por ciclo de atualização, isso acontece se o valor step não for definido. Para alterar a taxa de atualização, o valor step deve ser definido.```

    Indeterminate Progress

    Se você quiser rastrear um processo que não foi determinado com precisão, você pode definir a propriedade de entrada indeterminate como true.

    <igx-circular-bar [animate]="false" [indeterminate]="true" [textVisibility]="false"></igx-circular-bar>
    Note

    Você pode ocultar o texto da barra de progresso circular definindo a propriedade textVisibility como false.

    O resultado final deve ser:

    Dynamic Progress

    Você pode alterar dinamicamente o valor do progresso usando controles externos como botões. Para conseguir isso, podemos vincular o valor a uma propriedade de classe:

    <div class="sample-content">
  <igx-circular-bar
    [value]="currentValue"
    [max]="100"
    [animate]="true"
    class="custom-size">
  </igx-circular-bar>
  <div class="button-container">
    <button igxIconButton="flat" (click)="decrementProgress()">
      <igx-icon fontSet="material">remove</igx-icon>
    </button>
    <button igxIconButton="flat" (click)="incrementProgress()">
      <igx-icon fontSet="material">add</igx-icon>
    </button>
  </div>
</div>

    Adicione os métodos que incrementam e decrementam o valor:

    @Component({...})
export class HomeComponent {
    public currentValue: number;

    public ngOnInit() {
        this.currentValue = 0;
    }

    public incrementProgress() {
        this.currentValue += 10;
        if (this.currentValue > 100) {
            this.currentValue = 100;
        }
    }

    public decrementProgress() {
        this.currentValue -= 10;
        if (this.currentValue < 0) {
            this.currentValue = 0;
        }
    }
}

    Adicione alguns estilos:

    .custom-size {
  width: 100px;
  height: 100px;
}

.sample-content {
  width: 300px;
  display: flex;
  align-items: center;
  margin-top: 30px;
}

    Gradient Progress

    One way to customize the progress bar is by using a color gradient instead of a solid color. This can be done in one of two ways - by using the IgxProgressBarGradientDirective directive or by implementing a custom theme, which supports up to two color stops.

    To create a gradient with just two color stops using a custom theme, you need to create a list of colors and pass it to the $fill-color-default theme parameter:

    $colors: #695cf9, #ef017c;

$custom-theme: progress-circular-theme(
  $fill-color-default: $colors,
);

    Você pode aprender mais sobre como estilizar a barra de progresso circular na Styling Section

    Para fornecer um gradiente com mais de 2 pontos de cor, temos que usar a diretiva em um ng-template em nossa igx-circular-bar assim:

    <div class="sample-content">
  <igx-circular-bar
    [value]="currentValue"
    [max]="100"
    [animate]="true"
    class="custom-size">
    <ng-template igxProgressBarGradient let-id>
      <svg:linearGradient [id]="id" gradientTransform="rotate(90)">
        <stop offset="0%" stop-color="#ff9a40" />
        <stop offset="50%" stop-color="#1eccd4" />
        <stop offset="100%" stop-color="#ff0079" />
      </svg:linearGradient>
    </ng-template>
  </igx-circular-bar>

  <div class="button-container">
    <button igxIconButton="flat" (click)="removeProgress()">
      <igx-icon fontSet="material">remove</igx-icon>
    </button>
    <button igxIconButton="flat" (click)="addProgress()">
      <igx-icon fontSet="material">add</igx-icon>
    </button>
  </div>
</div>

    Após reproduzir os passos acima, você deverá obter este resultado:

    Estilização

    Para começar a estilizar a barra de progresso circular, precisamos importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Following the simplest approach, we create a new theme that extends the progress-circular-theme and accepts the $base-circle-color and the $fill-color-default parameters.

    $custom-theme: progress-circular-theme(
  $base-circle-color: lightgray,
  $fill-color-default: rgb(32, 192, 17),
);

    O último passo é incluir o tema do componente em nosso aplicativo.

    @include css-vars($custom-theme);

    Demo

    API