RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://coreui.io/bootstrap/docs/components/loading-buttons/ below:

Bootstrap Loading Buttons - extended examples and tutorials

Components Loading buttons

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

Other frameworks

CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.

Basic example

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

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

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

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

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