Angular Buttons with built-in loading indicators. Indicate the loading state of the button bridging the gap between action and feedback.
Available in Other JavaScript Frameworks
CoreUI Angular Loading Button Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:
On this page
Examples
Cancellable on click by default.
Border (default spinner)
import { Component, signal } from '@angular/core';
import { LoadingButtonComponent } from '@coreui/angular';
@Component({
selector: 'docs-loading-button-border-default-spinner',
templateUrl: './loading-button-border-default-spinner.component.html',
imports: [LoadingButtonComponent]
})
export class LoadingButtonBorderDefaultSpinnerComponent {
readonly loading = signal(new Array(4));
onClick(idx: number): void {
if (this.loading()[idx]) {
clearTimeout(this.loading()[idx]);
this.loading.update((value) => {
value[idx] = undefined;
return [...value];
});
} else {
this.loading.update((value) => {
value[idx] = setTimeout(() => {
this.loading.update((v) => {
v[idx] = undefined;
return [...v];
});
}, 3000);
return [...value];
});
}
}
onChange(changeEvent: boolean, idx: number): void {
console.log(changeEvent, idx);
}
}<button (click)="onClick(0)" [loading]="loading()[0]" (loadingChange)="onChange($event, 0)" cLoadingButton>Submit</button>
<button (click)="onClick(1)" [loading]="loading()[1]" cLoadingButton variant="ghost">Submit</button>
<button (click)="onClick(2)" [loading]="loading()[2]" cLoadingButton variant="outline">Submit</button>Grow
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { LoadingButtonComponent } from '@coreui/angular';
@Component({
selector: 'docs-loading-button-grow',
templateUrl: './loading-button-grow.component.html',
standalone: true,
changeDetection: ChangeDetectionStrategy.Eager,
imports: [LoadingButtonComponent]
})
export class LoadingButtonGrowComponent {
readonly loading = signal(new Array(4));
onClick(idx: number): void {
if (this.loading()[idx]) {
clearTimeout(this.loading()[idx]);
this.loading.update((value) => {
value[idx] = undefined;
return [...value];
});
} else {
this.loading.update((value) => {
value[idx] = setTimeout(() => {
this.loading.update((v) => {
v[idx] = undefined;
return [...v];
});
}, 3000);
return [...value];
});
}
}
}<button (click)="onClick(0)"
[loading]="loading()[0]"
cLoadingButton
color="info"
spinnerType="grow">
{{ loading()[0] ? 'Cancel' : 'Upload' }}
</button>
<button (click)="onClick(1)"
[loading]="loading()[1]"
cLoadingButton
color="success"
spinnerType="grow"
variant="ghost">
{{ loading()[1] ? 'Cancel' : 'Upload' }}
</button>
<button (click)="onClick(2)"
[loading]="loading()[2]"
cLoadingButton
color="warning"
spinnerType="grow"
variant="outline">
{{ loading()[2] ? 'Cancel' : 'Upload' }}
</button>
Disabled on loading
Non cancellable on click.
import { Component, signal } from '@angular/core';
import { LoadingButtonComponent } from '@coreui/angular';
@Component({
selector: 'docs-loading-button-disabled-on',
templateUrl: './loading-button-disabled-on.component.html',
imports: [LoadingButtonComponent]
})
export class LoadingButtonDisabledOnComponent {
readonly loading = signal(new Array(4));
onClick(idx: number): void {
if (this.loading()[idx]) {
clearTimeout(this.loading()[idx]);
this.loading.update((value) => {
value[idx] = undefined;
return [...value];
});
} else {
this.loading.update((value) => {
value[idx] = setTimeout(() => {
this.loading.update((v) => {
v[idx] = undefined;
return [...v];
});
}, 3000);
return [...value];
});
}
}
}<button (click)="onClick(0)" [loading]="loading()[0]" cLoadingButton spinnerType="grow" disabledOnLoading>Submit</button>
<button (click)="onClick(1)" [loading]="loading()[1]" cLoadingButton spinnerType="grow" disabledOnLoading variant="ghost">Submit</button>
<button (click)="onClick(2)" [loading]="loading()[2]" cLoadingButton spinnerType="grow" disabledOnLoading variant="outline">Submit</button>API reference
LoadingButton Module
import { LoadingButtonModule } from '@coreui/angular';
@NgModule({
imports: [LoadingButtonModule,]
})
export class AppModule() { }cLoadingButton
component
import { LoadingButtonComponent } from '@coreui/angular-pro'