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.

Bootstrap 5 Loading Buttons

Loading Buttons

Bootstrap loading buttons are interactive elements that provide visual feedback to users, indicating that an action is being processed. These buttons typically display a loading spinner or animation.

🤖 Looking for the LLM-optimized version? View llm.md

Available in Other JavaScript Frameworks

CoreUI Loading Buttons components are available as native Angular, React, and Vue components. Explore framework-specific implementations below:

On this page

Basic example

Create basic Bootstrap Loading Buttons with different styles: primary, outline, and ghost. These buttons show a loading state when clicked.

html

<button type="button" class="btn btn-primary" data-coreui-timeout="2000" data-coreui-toggle="loading-button">Submit</button>
<button type="button" class="btn btn-outline-primary" data-coreui-toggle="loading-button">Submit</button>
<button type="button" class="btn btn-ghost-primary" data-coreui-toggle="loading-button">Submit</button>

Spinners

Border

The default option. Use loading buttons with a border spinner to indicate loading status.

html

<button type="button" class="btn btn-info" data-coreui-toggle="loading-button">Submit</button>
<button type="button" class="btn btn-outline-success" data-coreui-toggle="loading-button">Submit</button>
<button type="button" class="btn btn-ghost-warning" data-coreui-toggle="loading-button">Submit</button>

Grow

Switch to a grow spinner for Bootstrap loading buttons by adding data-coreui-spinner-type="grow".

html

<button type="button" class="btn btn-info" data-coreui-spinner-type="grow" data-coreui-toggle="loading-button">Submit</button>
<button type="button" class="btn btn-outline-success" data-coreui-spinner-type="grow" data-coreui-toggle="loading-button">Submit</button>
<button type="button" class="btn btn-ghost-warning" data-coreui-spinner-type="grow" data-coreui-toggle="loading-button">Submit</button>

Usage

Heads up! In our documentation, all examples show standard CoreUI implementation. If you are using a Bootstrap-compatible version of CoreUI, remember to use the following changes:

In the constructor, please use bootstrap instead of coreui. For example, new bootstrap.Alert(...) instead of new coreui.Alert(...)
In events, please use bs instead of coreui, for example close.bs.alert instead of close.coreui.alert
In data attributes, please use bs instead of coreui. For example, data-bs-toggle="..." instead of data-coreui-toggle="..."

Via data attributes

Add data-coreui-toggle="loading-button" to a button element.

<button type="button" class="btn btn-primary" data-coreui-toggle="loading-button">Submit</button>

Via JavaScript

Call the loading button via JavaScript:

<div class="btn btn-primary btn-loading"></div>

const loadingButtonElementList = Array.prototype.slice.call(document.querySelectorAll('.btn-loading'))
const loadingButtonList = loadingButtonElementList.map(loadingButtonEl => {
  return new coreui.DatePicker(loadingButtonEl)
})

Options

Options can be passed using data attributes or JavaScript. To do this, append an option name to data-coreui-, such as data-coreui-animation="{value}". Remember to convert the case of the option name from “camelCase” to “kebab-case” when using data attributes. For instance, you should write data-coreui-custom-class="beautifier" rather than data-coreui-customClass="beautifier".

Starting with CoreUI 4.2.0, all components support an experimental reserved data attribute named data-coreui-config, which can contain simple component configurations as a JSON string. If an element has attributes data-coreui-config='{"delay":50, "title":689}' and data-coreui-title="Custom Title", then the final value for title will be Custom Title, as the standard data attributes will take precedence over values specified in data-coreui-config. Moreover, existing data attributes can also hold JSON values like data-coreui-delay='{"show":50, "hide":250}'.

Name	Type	Default	Description
`disabledOnLoading`	boolean	`false`	Makes button disabled when loading.
`spinnerType`	‘border’, ‘grow’	`'border'`	Sets type of spinner.
`timeout`	boolean, number	`false`	Automatically starts loading animation and stops after a determined amount of milliseconds.

Methods

Method	Description
`start`	Starts loading.
`stop`	Stops loading.
`dispose`	Destroys an element’s loading button. (Removes stored data on the DOM element)
`getInstance`	Static method which allows you to get the multi select instance associated with a DOM element.

const myBtnLoading = document.getElementById('btn-loading')
const myBtn = new coreui.LoadingButton(myBtnLoading)
myBtn.start()

Events

Loading Button component exposes a few events for hooking into multi select functionality.

Method	Description
`start.coreui.loading-button`	Fires immediately when the start method is called.
`stop.coreui.loading-button`	Fires immediately when the stop method is called.

const myBtnLoading = document.getElementById('myBtnLoading')
myBtnLoading.addEventListener('stop.coreui.loading-button', () => {
  // do something...
})