Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
  • Give us a star ⭐️ 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

As options can be passed via data attributes or JavaScript, you can append an option name to data-coreui-, as in data-coreui-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-coreui-custom-class="beautifier" instead of data-coreui-customClass="beautifier".

As of CoreUI 4.2.0, all components support an experimental reserved data attribute data-coreui-config that can house simple component configuration as a JSON string. When an element has data-coreui-config='{"delay":0, "title":123}' and data-coreui-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-coreui-config. In addition, existing data attributes are able to house JSON values like data-coreui-delay='{"show":0,"hide":150}'.

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.
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...
})