Notez que cet article a été écrit il y a plus de 3 ans, mais il n'est pas forcément 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.
