Animation

By default, the animation is disabled. To enable it, set the animation option to true.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <div class="wrapper">
          <div class="wrapper">
            <input type="checkbox" class="k-checkbox" id="animation" [(ngModel)]="animation" />
            <label class="k-checkbox-label" [attr.for]="'animation'">{{animation ? 'Disable' : 'Enable'}} the animation</label>
          </div>
        </div>
        <kendo-progressbar
          [animation]="animation"
          [value]="value"
          ></kendo-progressbar>
          <button class="k-button" (click)="changeProgress()">{{text}} progress</button>
    `,
    styles: [`
      .wrapper {
        padding-bottom: 20px;
      }
    `]
})
class AppComponent {
    public animation: boolean = true;
    public value = 0;
    public get text(): string {
        return this.value === 0 ? 'Start' : 'Reset';
    }

    public changeProgress() {
        this.value = this.value === 0 ? 100 : 0;
    }
}

By default, the animation runs for 400ms. To customize this, set the duration option of ProgressBarAnimation to the desired value.

import { Component } from '@angular/core';
import { ProgressBarAnimation } from '@progress/kendo-angular-progressbar';

@Component({
    selector: 'my-app',
    template: `
        <p>Duration: 2000ms</p>
        <kendo-progressbar
            [animation]="animation"
            [value]="value"
            ></kendo-progressbar>
            <button class="k-button" (click)="changeProgress()">{{text}} progress</button>
    `,
    styles: [`
      .wrapper {
        padding-bottom: 20px;
      }
    `]
})
class AppComponent {
    public animation: ProgressBarAnimation = {
        duration: 2000
    };
    public value = 0;
    public get text(): string {
        return this.value === 0 ? 'Start' : 'Reset';
    }

    public changeProgress() {
        this.value = this.value === 0 ? 100 : 0;
    }
}

Resetting the Value without Animation

In some cases the value should be updated without animation (for example when resetting the progress). To achieve this you could temporarily disable the animation. The following example demonstrates this approach.

import { Component, ChangeDetectorRef } from '@angular/core';
import { ProgressBarAnimation } from '@progress/kendo-angular-progressbar';

@Component({
    selector: 'my-app',
    template: `
        <kendo-progressbar
            [animation]="animation"
            [value]="value"
            ></kendo-progressbar>
            <button class="k-button" [disabled]="value > 0" (click)="startProgress()">Start progress</button>
            <button class="k-button" [disabled]="!value" (click)="resetProgress()">Reset progress</button>
    `,
    styles: [`
      .wrapper {
        padding-bottom: 20px;
      }
    `]
})
class AppComponent {
    public animation: ProgressBarAnimation | boolean = {
        duration: 2000
    };
    public value = 0;

    constructor(private cdr: ChangeDetectorRef) {}

    public startProgress() {
      this.value = 100;
    }

    public resetProgress() {
      this.reset();
      this.restoreProgressBarAnimation();
    }

    private reset() {
      this.animation = false;
      this.value = 0;
      this.cdr.detectChanges();
    }

    private restoreProgressBarAnimation() {
      this.animation = { duration: 2000 };
    }
}

In this article