default progress indicator location

General
1

Hi,

Got 2 questions re. the default progress indicator that appears at the top right-hand corner when Vaadin’s waiting for server response:

  1. How do you move that to the centre of screen?

  2. How do you make it modal, so that the background greys out and freezes until server response is received?

thanks a lot, cheers.

2

You need CSS for this.

Something along the lines of:

.v-loading-indicator,
.v-loading-indicator-delay,
.v-loading-indicator-wait {
   width: 100%;
   height: 100%;
   margin: 0;
   background-position: 50%;
   background-color: gray;
   opacity: .8;
   -ms-filter: alpha(opacity=80);
   filter: alpha(opacity=80);
}
3

Thx Jouni, it works!

But :blink: I have an table with many lines and scrollbar, at the footer is a “paginator”.
When i click to the next side, it shows the gray background but the indicator it self isn’t in
focus.
Is it possible to move the indicator into focus or scroll the table to top?

greets martin

4

Okay add the following lines and it works with scollable apps/sides/tables

background-repeat: no-repeat;
background-attachment: fixed;

5

thank you. I am using this css. i have one more question. i would like to add a message also like “Please wait…” while the spinning circle is seen. is that possible to set using CSS property?

6

I want the same functionality with a message like a loading indicator with a message saying “Please wait …” How can I achieve this ?

7

i´ve also added this css to my project but the progress indicator is still in right corner :frowning:

i´ve added the code to the styles.css of my theme. is there something else to do?!

8

now i´ve got another problem :frowning: → look at my attachement

my styles.css:

@import url(../reindeer/styles.css);

.v-loading-indicator,
.v-loading-indicator-delay,
.v-loading-indicator-wait {
   width: 100%;
   height: 100%;
   margin: 0;
   background-position: 50%;
   background-color: gray;
   opacity: .8;
   -ms-filter: alpha(opacity=80);
   filter: alpha(opacity=80);
}

also when i change the “width” and “height” attribute there is no improvement…

can somebody help me please?!
12655.png

9

ok, it works with this styles.css:

@CHARSET "ISO-8859-1";
@import url(../reindeer/styles.css);

 .v-loading-indicator,  
 .v-loading-indicator-delay,  
 .v-loading-indicator-wait {  
   width: 100%;  
   height: 100%;  
   margin: 0;  
   background-position: 50%;  
   background-color: gray;  
   background-repeat: no-repeat;  
   background-attachment: fixed;   
   opacity: .8;  
   -ms-filter: alpha(opacity=80);  
   filter: alpha(opacity=80);  
 }
10

I know this is kind of an old thread, but does anyone know why this only works on IE ? FF and opera seem to ignore the change.

EDIT : Just ignore this. It was a caching issue. Newbie mistake…