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. 

<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. 

<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! 

<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

<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