Vaadin Loading Spinner zeigt es nicht an

[OnDemand]

Hallo zusammen,

jemand Ahnung von CSS? Hab das CSS bearbeitet, sodass es einen "Vorhang" anzeigt, sprich der Inhalt wird während des Ladens abgedunkelt. Zusätzlich möchte ich mein gif darauf anzeigen, aber bekomm es nicht hin.

Hat jemand ne Idee?

.v-loading-indicator {
    position: fixed; /* Occupy whole screen even if scrolled */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: auto;
    animation: fadein 0.3s ease-out 0.2s normal 1 both;
    z-index: 2147483647;
    background-image: url("/preloader.gif");
}

Das ganze sieht so aus. Hätte da aber gern noch was bewegtes drauf. Entweder mein gif oder irgenwas anderes.

 

[OnDemand]

Irgendwie hab ich es nun hinbekommen:

.v-loading-indicator {
    position: fixed; /* Occupy whole screen even if scrolled */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Eat mouse events when visible, doesn't prevent scrolling */
    pointer-events: auto;
    /* Animated with delay to prevent flashing */
    animation: fadein 0.3s ease-out 0.2s normal 1 both;
    z-index: 2147483647;

}
.v-loading-indicator:before {
    position: absolute;
    top: 40%;
    left: 45%;
    content: url("https://xxxxx.com/preloader.gif");
}


@keyframes fadein {
    0% {
        background: rgba(0,0,0,0);
    }
    100% {
        background: rgba(0,0,0,.6); /* Darkens the UI */
    }
}