CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
  • undefinedGetting started
  • undefinedLayout
  • undefinedForms
  • undefinedComponents
  • undefinedMigration
If you like this project and want to help us, please give us a star ⭐️ on Github. ➡️ undefined Star🙏
  • undefined
  • undefined

Vue Loading Button Component

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

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.

Code licensed MIT , docs CC BY 3.0 .