On this page

This component is part of CoreUI PRO – a powerful UI library with over 250 components and 25+ templates, designed to help you build modern, responsive apps faster. Fully compatible with Angular, Bootstrap, React.js, and Vue.js.

Angular Loading Button Component

Angular Buttons with built-in loading indicators. Indicate the loading state of the button bridging the gap between action and feedback.

## Examples Cancellable on click by default. ### Border (default spinner)

### Grow

### Disabled on loading Non cancellable on click.

--- ## API reference ### LoadingButton Module

 ```typescript
import { LoadingButtonModule } from '@coreui/angular';

@NgModule({
  imports: [LoadingButtonModule,]
})
export class AppModule() { }
```

### cLoadingButton _directive_ ##### Inputs

| name | description | type | default | | ---- | ----------- | ---- | ------- | | `disabledOnLoading` | Makes button disabled when loading. | `boolean` | _false_ | | `loading` | Loading state (set to true to start animation). | `boolean` | _false_ | | `spinnerType` | Type of spinner. | `border` \| `grow` |_border_|

##### Outputs

| name | description | type | | ---- | ----------- | ---- | | `loadingChange` | Event emitted on `loading` change. | `boolean` |