Question

I want to replace the standard dijit.ContentPane loadingMessage with a animated GIF instead of the default “Loading…” message.

According to documentation, the default message is:

<span class='dijitContentPaneLoading'>${loadingState}</span>

So I have overridden the CSS with:

.dijitContentPaneLoading {
    background-image: url('../images/loading.gif');
    background-repeat: no-repeat;
    background-position: center center;
}

I can see the GIF and the “Loading…” message when the ContentPane loads, but the problem is that because it is only a <span> I can’t seem to get it to take up the whole pane and be centered, instead it sits in the top left and doesn’t display the whole loading graphic. I don’t want to have to override each loadingMessage with code, especially I prefer to use the declarative mode.

Is there some simpler way (hopefully via CSS) to get the loading image centered within the pane?

Answer 1

Would something like this work?

.dijitContentPaneLoading {
    display: block;
    position: relative;
    top: 40%;
    background-image: url('../images/loading.gif');
}

(Also make sure that the ContentPane itself has position: relative or position:absolute)

Of course, the pane needs to have a fixed height. If it’s just a plain ContentPane that expands to fit it’s content then the browser won’t know the height until the load finishes, hence it would be impossible to center the loading message vertically.