Loading management
Vue Loading management
Displays animation in a container (such as a table) while loading data.
Note: Read the API tab to find all available options and advanced customization
Basic example
Use MDBLoading component to init loading on your page.
Loading automatically attach to body element, so if you
want attach loading to element you have add
parentSelector property with class or id of your parent.
Loading...
<template>
<div
id="loading-test"
style="height: 300px; width: 100%; z-index: 1029"
>
<MDBLoading parentSelector="#loading-test" />
</div>
</template>
<script>
import { MDBLoading } from "mdb-vue-ui-kit";
export default {
components: {
MDBLoading
}
};
</script>
<script setup lang="ts">
import { MDBLoading } from "mdb-vue-ui-kit";
</script>
Colors
You can set a diffrent colors to loader by using
textClasses and spinnerClasses properties
with text-* color like primary, success, danger, warning.
Loading...
<template>
<div
id="loading-test-2"
style="height: 300px; width: 100%; z-index: 1029"
>
<MDBLoading
parentSelector="#loading-test-2"
spinnerClasses="text-success"
textClasses="text-success"
backdropColor="blue"
:backdropOpacity="0.2"
/>
</div>
</template>
<script>
import { MDBLoading } from "mdb-vue-ui-kit";
export default {
components: {
MDBLoading
}
};
</script>
<script setup lang="ts">
import { MDBLoading } from "mdb-vue-ui-kit";
</script>
Custom spinners
MDB Growing spinner
If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!
Loading...
<template>
<div
id="loading-test-3"
style="height: 300px; width: 100%; z-index: 1029"
>
<MDBLoading
parentSelector="#loading-test-3"
icon="spinner-grow"
/>
</div>
</template>
<script>
import { MDBLoading } from "mdb-vue-ui-kit";
export default {
components: {
MDBLoading
}
};
</script>
<script setup lang="ts">
import { MDBLoading } from "mdb-vue-ui-kit";
</script>
Font Awesome
Loading...
<template>
<div
id="loading-test-4"
style="height: 300px; width: 100%; z-index: 1029"
>
<MDBLoading
parentSelector="#loading-test-4"
icon="fas fa-spinner fa-spin fa-2x"
/>
</div>
</template>
<script>
import { MDBLoading } from "mdb-vue-ui-kit";
export default {
components: {
MDBLoading
}
};
</script>
<script setup lang="ts">
import { MDBLoading } from "mdb-vue-ui-kit";
</script>
Delay
<template>
<div
v-if="switch1"
class="test-counter h2 d-flex justify-content-center align-items-center"
>
{{ counter }}
</div>
<MDBSwitch label="Switch Delay" v-model="switch1" />
<MDBLoading v-model="isSwitched" />
</template>
<script>
import { MDBLoading, MDBSwitch } from "mdb-vue-ui-kit";
import { ref, watch } from "vue";
export default {
components: {
MDBLoading,
MDBSwitch
},
setup(){
const counter = ref(4);
const switch1 = ref(false);
const isSwitched = ref(false);
const timer = ref(null)
watch(
() => switch1.value,
value => {
if (value && !isSwitched.value) {
timer.value = setInterval(() => {
if (counter.value > 0) {
counter.value = counter.value - 1;
}
if (counter.value === 0) {
isSwitched.value = true;
counter.value = 4;
}
}, 1000);
}
}
);
watch(
() => isSwitched.value,
value => {
if (value) {
clearInterval(timer.value);
setTimeout(() => {
isSwitched.value = false;
}, 3000);
}
}
);
return {
counter,
switch1,
isSwitched
}
}
};
</script>
<script>
import { MDBLoading, MDBSwitch } from "mdb-vue-ui-kit";
import { ref, watch } from "vue";
const counter = ref(4);
const switch1 = ref(false);
const isSwitched = ref(false);
const timer = ref<number>(null)
watch(
() => switch1.value,
value => {
if (value && !isSwitched.value) {
timer.value = setInterval(() => {
if (counter.value > 0) {
counter.value = counter.value - 1;
}
if (counter.value === 0) {
isSwitched.value = true;
counter.value = 4;
}
}, 1000);
}
}
);
watch(
() => isSwitched.value,
value => {
if (value) {
clearInterval(timer.value);
setTimeout(() => {
isSwitched.value = false;
}, 3000);
}
}
);
</script>
Full screen
<template>
<MDBBtn color="primary" @click="isSwitched = true">
Full screen
</MDBBtn>
<MDBLoading v-model="isSwitched" />
</template>
<script>
import { MDBLoading, MDBBtn } from "mdb-vue-ui-kit";
import { ref, watch } from "vue";
export default {
components: {
MDBLoading,
MDBBtn
},
setup(){
const isSwitched = ref(false);
watch(
() => isSwitched.value,
value => {
if (value) {
setTimeout(() => {
isSwitched.value = false;
}, 3000);
}
}
);
return {
isSwitched
}
}
};
</script>
<script setup lang="ts">
import { MDBLoading, MDBBtn } from "mdb-vue-ui-kit";
import { ref, watch } from "vue";
const isSwitched = ref(false);
watch(
() => isSwitched.value,
value => {
if (value) {
setTimeout(() => {
isSwitched.value = false;
}, 3000);
}
}
);
</script>
Loading management - API
Import
<script>
import {
MDBLoading
} from 'mdb-vue-ui-kit';
</script>
Properties
| Property | Type | Default | Description |
|---|---|---|---|
tag |
String | "div" |
Set tag of loading element wrapper |
fullScreen |
Boolean | true |
Attach loading to the body element |
parentSelector |
String | ' |
Set parent of loader. It can be every element with class or id |
icon |
String | 'spinner-border' |
Set loader icon |
loadingText |
String | 'Loading...' |
Set loader text |
backdropColor |
String | 'black' |
Set loader backdrop color |
backdropOpacity |
Number | 0.4 |
Set loader backdrop opacity |
overflow |
Boolean | true |
Set body attribute overflow: 'hidden' on on active
loader
|
spinnerClasses |
String | |
Adds custom classes to loader icon element |
textClasses |
String | |
Adds custom classes to loader text element |
v-model |
String | |
Manually show/hide loader element |