Remplacement générique du message de chargement pour un panneau de contenu dijit

Question

Je souhaite remplacer le standard dijit.ContentPane loadingMessage par un GIF animé au lieu du message «Loading ...» par défaut.

Selon la documentation, le message par défaut est:

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

J'ai donc le CSS avec substitution:

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

Je peux voir le GIF et le message "Chargement ..." quand le ContentPane charge, mais le problème est que parce qu'il est seulement un <span> je ne peux pas sembler l'obtenir pour prendre toute la vitre et être centré, à la place il se trouve en haut à gauche et n'affiche pas le graphique de chargement entier. Je ne veux pas avoir à surcharger chaque loadingMessage avec du code, surtout je préfère utiliser le mode déclaratif.

Existe-t-il un moyen plus simple (espérons via CSS) pour centrer l'image de chargement dans le volet?

Answer 1

Un truc pareil pourrait-il fonctionner?

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

(Assurez-vous également que le ContentPane a lui-même position: relative ou position: absolute)

Bien sûr, le volet doit avoir une hauteur fixe. Si c'est simplement un ContentPane qui se dilate pour s'adapter à son contenu, le navigateur ne connaîtra pas la hauteur tant que le chargement ne sera pas terminé, il sera donc impossible de centrer le message de chargement verticalement.