88 lines
1.5 KiB
Vue
88 lines
1.5 KiB
Vue
<script setup>
|
|
const loadings = ref([])
|
|
|
|
const load = i => {
|
|
loadings.value[i] = true
|
|
setTimeout(() => {
|
|
loadings.value[i] = false
|
|
}, 3000)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<VBtn
|
|
:loading="loadings[0]"
|
|
:disabled="loadings[0]"
|
|
color="primary"
|
|
@click="load(0)"
|
|
>
|
|
Accept Terms
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
:loading="loadings[1]"
|
|
:disabled="loadings[1]"
|
|
color="secondary"
|
|
@click="load(1)"
|
|
>
|
|
Upload
|
|
<VIcon
|
|
end
|
|
icon="ri-upload-cloud-line"
|
|
/>
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
:loading="loadings[2]"
|
|
:disabled="loadings[2]"
|
|
color="success"
|
|
@click="load(2)"
|
|
>
|
|
Loader slot
|
|
<template #loader>
|
|
<span>Loading...</span>
|
|
</template>
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
:loading="loadings[3]"
|
|
:disabled="loadings[3]"
|
|
color="info"
|
|
@click="load(3)"
|
|
>
|
|
Icon Loader
|
|
<template #loader>
|
|
<span class="custom-loader">
|
|
<VIcon icon="ri-refresh-line" />
|
|
</span>
|
|
</template>
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
:loading="loadings[4]"
|
|
:disabled="loadings[4]"
|
|
color="warning"
|
|
icon="ri-upload-cloud-line"
|
|
@click="load(4)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.custom-loader {
|
|
display: flex;
|
|
animation: loader 1s infinite;
|
|
}
|
|
|
|
@keyframes loader {
|
|
from {
|
|
transform: rotate(0);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|