Notez que cet article a été écrit pour la première fois il y a plus de 3 ans, mais n'est pas nécessairement obsolète.
Afin de centrer une image loader, pendant le chargement aJax par exemple, on enveloppe l’image dans une div que l’on va positionner en fixe.
Utilisation dans l’appel aJax:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$( 'body' ).preprend( '<div id="loader"><img src="/path/to/loader.(gif/svg)" /></div>' ) $.ajax({ url: '/path/to/file.php', type: 'default GET (Other values: POST)', dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)', data: { param1: 'value1', param2: 'value2' } }) .done( function() { console.log( 'success' ); }) .fail( function() { console.log( 'error' ); }) .always( function() { $( '#loader' ).remove(); console.log( 'complete' ); }); |
On enveloppe l’image dans la div#loader. Et on style cela:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#loader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10000; overflow: hidden; background: rgba( 100, 100, 100, 0.2 ); } #loader > img { position: absolute; display: block; left: 50%; top: 50%; -webkit-transform: translate( -50%, -50% ); transform: translate( -50%, -50% ); } |
Choisir la couleur et l’opacité du fond: rgba( 100, 100, 100, 0.2).
Et hop, l’image loader est centrée dans la fenêtre du navigateur.
