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.

The next step is to import the IgxProgressBarModule in the app.module.ts file:

// app.module.ts

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

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

Alternatively, as of 16.0.0 you can import the IgxCircularProgressBarComponent as a standalone dependency, or use the IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES token to import the component and all of its supporting components and directives.

// 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 {}

Now that you have the Ignite UI for Angular Progress Bar module or directives imported, you can start using the igx-circular-bar component.

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

The igx-circular-bar emits onProgressChanged event that outputs an object like this {currentValue: 65, previousValue: 64} on each step.

Note

The default progress increments by 1% of the max value per update cycle, this happens if the step value is not defined. To change the update rate, the step value should be defined.```

Indeterminate Progress

If you want to track a process that is not determined precisely, you can set the indeterminate input property to true.

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

Note

You can hide the text of the circular progress bar by setting the textVisibility property to 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 {
  --diameter: 100px;
}

.sample-content {
  width: 300px;
  display: flex;
  align-items: center;
  margin: 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,
);

You can learn more about styling the circular progress bar in the Styling Section

To provide a gradient that has more than 2 color stops, we have to use the directive on an ng-template in our igx-circular-bar like that:

<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

To get started with styling the circular progress bar, we need to import the index file, where all the theme functions and component mixins live:

@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(
  $fill-color-default: rgb(32, 192, 17),
  $diameter: 50px
);

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

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

Demo

API

• Componente IgxCircularProgressBar
• Estilos de componentes IgxCircularProgressBar