Vue Loading management

Overview
API

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.

Colors

You can set a diffrent colors to loader by using textClasses and spinnerClasses properties with text-* color like primary, success, danger, warning.

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!

Font Awesome

Delay

Switch Delay

template
script


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

Full screen

Import

script


      import { MDBLoading } from "mdb-vue-ui-kit";

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