Get started
Loading...
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.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

Text Underneath Spinner

Burke Ingraffia
5 years ago Jun 29, 2016 7:34pm

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!

Thomas Mattsson
5 years ago Jul 14, 2016 8:46am

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

Burke Ingraffia
5 years ago Jul 14, 2016 1:34pm

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?

Thomas Mattsson
5 years ago Jul 14, 2016 1:47pm

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;