Search results

Customize progress using cssClass in Angular ProgressButton component

26 Oct 2021 / 1 minute to read

You can customize the background filler UI using the cssClass property.

  • Adding e-vertical to cssClass shows vertical progress.
  • Adding e-progress-top to cssClass shows progress at the top.

You can also show reverse progress by adding custom class to the cssClass property.

Source
Preview
app.component.ts
app.module.ts
main.ts
progress.css
Copied to clipboard
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `<button ejs-progressbutton content='Vertical Progress' [enableProgress]='true' cssClass='e-hide-spinner e-vertical' [duration]='4000'></button>
<button ejs-progressbutton content='Progress Top' [enableProgress]='true' cssClass='e-hide-spinner e-progress-top' [duration]='4000'></button>
<button ejs-progressbutton content='Reverse Progress' [enableProgress]='true' cssClass='e-hide-spinner e-reverse-progress' [duration]='4000'></button>`
})

export class AppComponent {
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ProgressButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ProgressButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
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);
Copied to clipboard
.e-reverse-progress .e-progress {
  right: 0;
  left: auto;
}

button {
  margin: 25px;
}