The QInnerLoading component allows you to add a progress animation within a component. Much like the Loading feature, it’s purpose is to offer visual confirmation to the user that some process is happening in the background, which takes an excessive amount of time. QInnerLoading will add an opaque overlay over the delayed element along with a Spinner.
In order for the spinner to be properly placed in the center of the element you want the loading display to show over, that element must have the
relative-positionCSS class declared.
QInnerLoading must be the last element inside it’s parent so it can appear on top of the other content
//... if using custom spinner, add it too
//whatever that is
<div class="row justify-center" style="margin-top: 40px">
View the source of the demo for the full example.
v-if and the Inner Loading component’s
:visible prop to toggle between the animation and your content.
|Boolean||Darkens the color of the opaque overlay for darker designs|
|Boolean||The loading effect becomes visible when true|
|Number, String||Changes the default size of the default spinner. The default is 42 pixels.|
|String||Specify color of the default spinner.|
If you add your own spinner, use the spinner’s own
colorprop to change the size and color.
To change the spinner, you can add your own as a child of QInnerLoading component. The below code would add a
teal-variation gear spinner with the size of 50 pixels.
<q-spinner-gears size="50px" color="teal-4" />
In most cases, you’ll probably want to add your own spinner, color and size. For more information on spinner control, please refer to the Spinner section of the docs.