Descripción general del componente de progreso circular Angular

El componente Ignite UI for Angular Indicador de progreso circular proporciona un indicador visual del proceso de una aplicación a medida que cambia. El indicador circular actualiza su apariencia a medida que cambia su estado.

Angular Circular Progress Example

Getting Started with Ignite UI for Angular Circular Progress

Para comenzar con el componente Ignite UI for Angular Circular Progress, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular

Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

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

// app.module.ts

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

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

Alternativamente,16.0.0 puedes importarlosIgxCircularProgressBarComponent como una dependencia independiente, o usar elIGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.

// home.component.ts

import { IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular/progressbar';
// 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 comprender mejor cómo funciona todo, creemos un ejemplo simple, como el de la demostración:

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

Después de eso, deberíamos tener la muestra de demostración en su 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.

El resultado final debería ser:

Dynamic Progress

Puede cambiar dinámicamente el valor del progreso utilizando controles externos como botones. Para lograr esto, podemos vincular el valor a una propiedad de clase:

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

Agregue los métodos que incrementan y disminuyen el 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;
        }
    }
}

Añade algunos 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>

Después de reproducir los pasos anteriores, debería obtener este resultado:

Estilismo

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

El último paso es incluir el tema del componente en nuestra aplicación.

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

Demo

API

• Componente IgxCircularProgressBar
• IgxCircularProgressBarEstilos de componentes