Showing content from https://coreui.io/bootstrap/docs/components/loading-buttons/llm.md below:
# Bootstrap 5 Loading Buttons with CoreUI 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. ## Bootstrap 5 Loading Buttons – Basic example Create basic Bootstrap Loading Buttons with different styles: primary, outline, and ghost. These buttons show a loading state when clicked. ```html ``` ## Bootstrap 5 Loading Buttons – Spinners ### Bootstrap 5 Loading Buttons – Border The default option. Use loading buttons with a border spinner to indicate loading status. ```html ``` ### Bootstrap 5 Loading Buttons – Grow Switch to a grow spinner for Bootstrap loading buttons by adding `data-coreui-spinner-type="grow"`. ```html ``` ## Bootstrap 5 Loading Buttons – 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="..."
### Bootstrap 5 Loading Buttons – Via data attributes Add `data-coreui-toggle="loading-button"` to a `button` element. ```html ``` ### Bootstrap 5 Loading Buttons – Via JavaScript Call the loading button via JavaScript: ```html ``` ```js const loadingButtonElementList = Array.prototype.slice.call(document.querySelectorAll('.btn-loading')) const loadingButtonList = loadingButtonElementList.map(loadingButtonEl => { return new coreui.DatePicker(loadingButtonEl) }) ``` ### Bootstrap 5 Loading Buttons – 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. | ### Bootstrap 5 Loading Buttons – 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. | ```js const myBtnLoading = document.getElementById('btn-loading') const myBtn = new coreui.LoadingButton(myBtnLoading) myBtn.start() ``` ### Bootstrap 5 Loading Buttons – 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. | ```js const myBtnLoading = document.getElementById('myBtnLoading') myBtnLoading.addEventListener('stop.coreui.loading-button', () => { // do something... }) ```
RetroSearch is an open source project built by @garambo
| Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4