CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
  • undefinedGetting started
  • undefinedCustomize
  • undefinedLayout
  • undefinedForms
  • undefinedComponents
  • undefinedTemplates
  • undefinedMigration
  • undefined
  • undefined
  • undefined
undefinedDownloadundefinedHire Us Get CoreUI PRO

CoreUI PRO Component

To use this component you must have a CoreUI PRO license. Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.

Vue Loading Button Component

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

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React components. To learn more please visit the following pages.

  • Angular Loading Button
  • Bootstrap Loading Button
  • React Loading Button

Examples #

<CLoadingButton color="primary" :timeout="2000">Submit</CLoadingButton>
<CLoadingButton color="primary" :timeout="2000" variant="outline">Submit</CLoadingButton>
<CLoadingButton color="primary" :timeout="2000" variant="ghost">Submit</CLoadingButton>
1
2
3

Spinners #

Border (Default) #

<CLoadingButton color="info" :timeout="2000">Submit</CLoadingButton>
<CLoadingButton color="success" variant="outline" :timeout="2000">Submit</CLoadingButton>
<CLoadingButton color="warning" variant="ghost" :timeout="2000">Submit</CLoadingButton>
1
2
3

Grow #

<CLoadingButton color="info" spinnerType="grow" :timeout="2000">Submit</CLoadingButton>
<CLoadingButton color="success" spinnerType="grow" variant="outline" :timeout="2000">Submit</CLoadingButton>
<CLoadingButton color="warning" spinnerType="grow" variant="ghost" :timeout="2000">Submit</CLoadingButton>
1
2
3

API #

CLoadingButton #

import { CLoadingButton } from '@coreui/vue-pro'
// or
import CLoadingButton from '@coreui/vue-pro/src/components/loading-button/CLoadingButton'
1
2
3

Props #

Prop nameDescriptionTypeValuesDefault
disabled-on-loadingMakes button disabled when loading.boolean-
loadingLoading state (set to true to start animation).boolean-false
spinner-typeSets type of spinner.
@default 'border'
string'border', 'grow''border'
timeoutAutomatically starts loading animation and stops after a determined amount of milliseconds.number--

Events #

Event nameDescriptionProperties
clickEvent called when the user clicks on a component.
On this page
  • Examples
  • Spinners
    • Border (Default)
    • Grow
  • API
    • CLoadingButton
  • GitHub
  • Twitter
  • CoreUI (Vanilla)
  • CoreUI for Angular
  • CoreUI for React.js

CoreUI for Vue is Open Source UI Components Library for Vue.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.