Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Text Underneath Spinner
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!
Progress spinner in tab sheet? I'm sorry, but I have no idea what that is.
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?
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;