chargeur gif centré comme couche supérieure

Question

J'ai une forme php. Une fois ce formulaire soumis, si toutes les données sont valides, il exécute un script python qui prend 5 à 10 secondes. Pour cette période d'attente, j'aimerais afficher une barre de progression (.gif) au milieu de l'écran. Si je pouvais aussi "atténuer" l'arrière-plan pour que la barre de progression ressemble à un calque supérieur et que l'arrière-plan soit un calque arrière, ce serait génial.

Merci.

Answer 1

Utilisez-vous des bibliothèques javascript, telles que jQuery? Dans n'importe quelle bibliothèque, j'imagine qu'il y aurait une douzaine de plugins lightbox flottants. Même si vous ne souhaitez pas utiliser une bibliothèque, vous pouvez consulter son code et, au lieu d'afficher une DIV, affichez simplement votre gif, si vous voyez ce que je veux dire.

Il existe même des plugins spécialement conçus à cet effet, tels que le plugin BlockUI pour jQuery. .

L'algorithme de base pour faire ce que vous voulez va comme ceci:

1. Lancer la demande Ajax
2. Afficher une image sombre semi-transparente sur toute la page, avec un gif animé au milieu.
3. Écoutez la réponse Ajax
4. Retirez la superposition et le gif du chargeur.

Je suppose que les étapes 1 et 3 se déroulent déjà bien. L'étape 4 est facile à faire. L'étape 2 n'est toutefois pas aussi facile, mais ne devrait pas être trop difficile. Je ne pourrais pas vous dire le code pour le faire moi-même, car je viens d'utiliser des plugins lightbox dans le passé. Jetez un coup d'œil sur Google pour la catégorie "visionneuse simple". ou quelque chose comme ça, puisque tout ce que vous voulez, c'est la fonctionnalité la plus élémentaire. Cet article de blog parle de une lightbox uniquement avec CSS , ce qui serait un bon point de départ pour vous aider à styliser la superposition.