Text Underneath Spinner

Flow
1

I know that the progress spinner on tabsheets is an empty Label component with an animated border, but is there a way to add text underneath it in the same way that the client-side app-loading image can have

$v-app-loading-text

underneath it?

Thanks!

2

Progress spinner in tab sheet? I’m sorry, but I have no idea what that is.

3

See the attached screenshot. The blue circle. It is nothing but an empty label component with rounded corners and an animated border.

How can a text message be added to it?
26602.png

4

Ah, that is just a Label with a Valo style name attached.

But, unfortunately, since the whole Label spins, there is no way to add text to it that doesn’t spin (I tried using CSS pseudo-elements, didn’t work). Your only option is to add another Label, or to create your own custom component based on the theme in valo, relevant CSS copied below:

height: 24px !important;
width: 24px !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 2px solid rgba(25, 125, 225, 0.2);
border-top-color: #197de1;
border-right-color: #197de1;
border-radius: 100%;
-webkit-animation: v-rotate-360 500ms infinite 
linear;
-moz-animation: v-rotate-360 500ms infinite linear;
animation: v-rotate-360 500ms infinite 
linear;
pointer-events: none;