Search results

Animation in Angular ProgressBar component

06 Oct 2022 / 1 minute to read

Progress Bar support to animate the progress by using animation property. Enable the animation by setting enable property and also you can control the speed by using duration property.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component, OnInit } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-progressbar';

@Component({
    selector: 'my-app',
    template: `
    <ejs-progressbar  id='percentage' type='Linear' value=100  [animation]='animation'>
    </ejs-progressbar>
    `
})
export class AppComponent implements OnInit {
    public animation: AnimationModel;
    ngOnInit(): void {
        this.animation = { enable: true, duration: 2000, delay: 0 };
    }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProgressBarModule, ProgressAnnotationService } from '@syncfusion/ej2-angular-progressbar';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ProgressBarModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ProgressAnnotationService]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);