If you like this project and want to help us, please give us a star ⭐️ on Github. ➡️ Star 🙏
View on GitHub

Loading Buttons

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

Basic example

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

Spinners

Border

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

Grow

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

Usage

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-coreui-, as in data-coreui-percent="".

Name Type Default Description
disabledOnLoading boolean false
spinner boolean true
spinnerType string 'border'
timeout boolean | number false

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.
var myBtnLoading = document.getElementById('btn-loading')
var myBtn = new coreui.LoadingButton(myBtnLoading)
myBtn.start()

Events

Multi Select 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.
var myBtnLoading = document.getElementById('myBtnLoading')
myBtnLoading.addEventListener('stop.coreui.loading-button', function () {
  // do something...
})