ProgressIndicator position and customization

I welcome!

Whether probably - to move ProgressIndicator from the right top corner in the centre?
And to adjust its sizes, colours and other?


I assume you mean the loading indicator. It’s styles are defined in a Vaadin theme’s css files. e.g. for Reindeer: VAADIN\themes\reindeer\styles.css in a vaadin jar.

.v-loading-indicator-wait {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 30000;
	width: 31px;
	height: 31px;
	background: transparent url(../base/common/img/loading-indicator.gif);
	margin-right: 5px;
	margin-top: 5px;
.v-loading-indicator-delay {
	background-image: url(../base/common/img/loading-indicator-delay.gif);
.v-loading-indicator-wait {
	background-image: url(../base/common/img/loading-indicator-wait.gif);

As you see, the position can be changed quite easily, but the color and the spinner are images so if you want to change those you’ll need to create new images.

Do note that to change these you should create your own theme, extend e.g. the Reindeer theme and add your css rules to your theme’s styles.css.


I welcome you, Teppo Kurki!

You again have fine helped me, many thanks! :smiley:


This also works with Chameleon theme? (I tried, but nothing changed.)

Best regards

This works with chameleon theme:

 .v-loading-indicator-wait {  
   width: 100%;  
   height: 100%;  
   margin: 0;  
   background-position: 50%;  
   background-color: white;  
   background-repeat: no-repeat;  
   background-attachment: fixed;   
   opacity: .25;  
   -ms-filter: alpha(opacity=25);  
   filter: alpha(opacity=25);