Total Pageviews

Wednesday, April 18, 2012

Moving default progress indicator and make it modal in Vaadin

The default progress indicator in Vaadin is displayed at the upper right corner of your web application. Sometimes this is not the best location, especially if you want your users not to miss this little image. So just place the progress indicator into the centre of the screen.
The progress indicator is by default not modal, so users can still interact with the web application. Maybe this is not what you want and you would like to make the progress indicator modal so users can't interact with the web application during a long running process.
To summarize the goals:
  1. Move default progress indicator from upper right corner to centre
  2. Make indicator modal, so users can't interact during a long running process
The easiest thing to accomplish this is to edit the styles.css file of your Vaadin theme. If you use the standard theme you may want to extend it by creating your own styles.css for your theme.
I use the reindeermods theme so the styles.css example provided below extends exactly that theme.
The minimal styles.css solution to solve the requirements:

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

 .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);  

This solution was taken from this Vaadin forum post.


  1. The progress indicator is showing all over the page :(

  2. thank you soooooooooooooooooooooooooooooooooooooooooo much man great work and code

  3. Useful information ..I am very happy to read this article..thanks for giving us this useful information.Fantastic walk-through. I appreciate this post.

  4. Hi Thanks for sharing this but i want to change my own application. i dont wnat to show these style for all applications

  5. You should probably indicate that you directly plagarised this from the vaadin forums >:(

  6. Just 1 remark, seems that defaut theme hasbeen renamed at least in vaadin 6.7.9
    instead of
    @import url(../reindeermods/styles.css);
    should be
    @import url(../reindeer/styles.css);