Descripción general del componente de progreso circular Angular

    El componente Ignite UI for Angular Circular Progress Indicator 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.

    Ejemplo de progreso circular Angular

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Angular y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Primeros pasos con Ignite UI for Angular

    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
    cmd

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

    El siguiente paso es importar IgxProgressBarModule en el archivo 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 {}
    typescript

    Alternativamente, a partir de 16.0.0, puede importar IgxCircularProgressBarComponent como una dependencia independiente o usar el token IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

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

    Ahora que ha importado la Ignite UI for Angular, puede comenzar a usar el componente igx-circular-bar.

    Usando el progreso circular Angular

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

    Después de eso, deberíamos tener la muestra de demostración en su navegador.

    La barra circular igx emite el evento onProgressChanged que genera un objeto como este {currentValue: 65, previousValue: 64} en cada paso.

    El progreso predeterminado aumenta en un 1% del valor max por ciclo de actualización; esto sucede si el valor del step no está definido. Para cambiar la velocidad de actualización, se debe definir el valor step

    Progreso indeterminado

    Si desea realizar un seguimiento de un proceso que no está determinado con precisión, puede establecer la propiedad de entrada indeterminate en true.

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

    Puede ocultar el texto de la barra de progreso circular configurando la propiedad textVisibility en false.

    El resultado final debería ser:

    EXAMPLE
    MODULES
    TS
    HTML

    Progreso dinámico

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

    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;
            }
        }
    }
    typescript

    Añade algunos estilos:

    .custom-size {
      width: 100px;
      height: 100px;
    }
    
    .sample-content {
      width: 300px;
      display: flex;
      align-items: center;
      margin-top: 30px;
    }
    scss

    Progreso del gradiente

    Una forma de personalizar la barra de progreso es utilizar un degradado de color en lugar de un color sólido. Esto se puede hacer de dos maneras: utilizando la directiva IgxProgressBarGradientDirective o implementando un tema personalizado, aunque los temas personalizados admiten hasta dos paradas de color.

    Si desea crear un degradado con solo dos paradas de color, puede hacerlo utilizando un tema personalizado. Cree una lista de colores y pásela al parámetro de tema $progress-circle-color:

    $colors: #695cf9, #ef017c;
    
    $custom-theme: progress-circular-theme(
      $progress-circle-color: $colors,
    );
    scss

    Puede obtener más información sobre cómo diseñar la barra de progreso circular en la Styling Section

    Para proporcionar un degradado que tenga más de 2 paradas de color, tenemos que usar la directiva en una ng-template en nuestra igx-circular-bar así:

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

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Estilo

    Para comenzar a diseñar la barra de progreso circular, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

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

    Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el progress-circular-theme y acepta los parámetros $base-circle-color y $progress-circle-color.

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

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

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

    Manifestación

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    App Builder | Banner de llamada a la acción

    API