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?