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



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



Full screen


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


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