Dim background while loading

Hi,

Iv move the normal loading indicator to the middle of my screen by this css that i found in this forum


.v-loading-indicator, .v-loading-indicator-delay, .v-loading-indicator-wait {
	position: fixed !important;
	top: 50%;
	left: 50%;
	z-index: 30000;
}

How do I at the same time dim down the background to a light grey? A sample would be great!

Best Regards
Marthin

A
modal sub-window
does that sort of thing by placing a translucent (“opaque: 0.5”) div element on top of all other UI. The div has v-window-modalitycurtain style.

I’m not sure if that is possible with just CSS, but the loading indicator is a div element and you might be able to set 100%x100% size for it, and then use the translucency settings. How you show the loading indicator image, especially centered, is probably the big problem there.

On the contrary – this is quite trivial to do:

.v-loading-indicator, .v-loading-indicator-delay, .v-loading-indicator-wait {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: 50%; /* Center the spinner inside the element */
    background-color: #ccc; /* Choose whatever color you wish */
    opacity: .5;
    filter: alpha(opacity=50);
    -ms-filter: alpha(opacity=50);
    background-repeat: no-repeat; /* thanks to Marthin for pointing this out */
}

Thanks for the anwers guys.

The final code was almost as Jouni said. But I needed to add a background-repeat: no-repeat; to not get hundreds of images rotating.

Thx!

Best Regards
Marthin

Ah, that’s right, I forgot that! :wacko: Thanks for correcting it so others won’t miss it. I’ll update my post as well.