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.
Vue 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.
Available in Other JavaScript Frameworks
CoreUI Vue Loading Button Component is also available for Angular, Bootstrap, and React. Explore framework-specific implementations below:
On this page
Example
Create basic Vue Loading Buttons with different styles: primary, outline, and ghost. These buttons show a loading state when clicked.
<template>
<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>
</template>
<script setup>
import { CLoadingButton } from '@coreui/vue'
</script>Spinners
Border (Default)
The default option. Use loading buttons with a border spinner to indicate loading status.
<template>
<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>
</template>
<script setup>
import { CLoadingButton } from '@coreui/vue'
</script>Grow
Switch to a grow spinner for Vue loading buttons by adding spinnerType="grow".
<template>
<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
>
</template>
<script setup>
import { CLoadingButton } from '@coreui/vue'
</script>