Marthin1
(Marthin Bergstrand)
April 14, 2011, 12:12pm
1
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
Marko1
(Marko Grönroos)
April 14, 2011, 12:47pm
2
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.
Jouni1
(Jouni Koivuviita)
April 15, 2011, 6:22am
3
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 */
}
Marthin1
(Marthin Bergstrand)
April 15, 2011, 6:59am
4
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
Jouni1
(Jouni Koivuviita)
April 15, 2011, 7:01am
5
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.