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">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>

Progress Bar

<button type="button" class="btn btn-danger btn-loading" data-coreui-progress="true">Submit</button>
<button type="button" class="btn btn-danger btn-loading" data-coreui-progress="true" data-coreui-spinner="false">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
percent number 0
spinner boolean true
spinnerType string 'border'
timeout number 1000

Methods

Method Description
start Starts loading. Shows the multi select's options.
stop Stops loading and reset the percent of loaded to the initial value.
pause Pauses loading.
resume Resumes loading.
complete Sets the percent of loaded to the 100%.
update Updates the configuration of loading button.
updatePercent Sets the percent of loaded to the provided value.
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.
complete.coreui.loading-button Fires immediately when the loading process is completed.
var myBtnLoading = document.getElementById('myBtnLoading')
myBtnLoading.addEventListener('complete.coreui.loading-button', function () {
  // do something...
})