Javascript tourne en attente, chose de type sablier

Question

Je souhaite indiquer à l'utilisateur d'une application Web qu'une tâche de longue durée est en cours d'exécution.Autrefois, ce concept aurait été communiqué à l'utilisateur par l'affichage d'un sablier.De nos jours, cela ressemble à un cercle tournant animé.(par exemple, lorsque vous chargez un nouvel onglet dans Firefox ou démarrez sous Mac OS X.Par coïncidence, la pile débordante dans le logo stackoverflow ressemble à un quart de cercle).

Existe-t-il un moyen simple de créer cet effet en utilisant Javascript (en particulier JQuery) ?Idéalement, j'aimerais avoir l'un de ces petits spinners comme éléments dans un tableau, pour indiquer à l'utilisateur que le système est toujours actif dans le traitement d'une tâche en attente (c'est-à-dire qu'il n'a pas oublié ni planté).(Bien sûr, je me rends compte qu'il est possible que le back-end soit tombé en panne et que le front-end s'affiche toujours comme un objet tournant animé, c'est plus dans le but psychologique de l'activité de l'utilisateur).

Et comment appelles-tu ce truc qui tourne, de toute façon ?

Answer 1

Google Indicateur d'activité Ajax pour trouver de nombreuses images et générateurs d'images (l'image "tournante" elle-même est un GIF animé).

Voici un lien pour vous aider à démarrer.

Avec l'image en main, utilisez JQuery pour basculer la visibilité de l'image (ou peut-être de sa balise DIV parent).Voir ce lien pour quelques informations supplémentaires.

rp

Answer 2

ce site le fera pour vous :

ajaxload

et sur OS X, ça s'appelle le "Beachball" et j'aime ajouter "Of Death".

Answer 3

http://preloaders.net/en/letters_numbers_words est sympa et comporte de nombreuses catégories dans le menu de gauche qui offrent plus de http://ajaxload.info fait, ainsi que des options de taille et d'arrière-plan...ajaxload semble assez obsolète ces jours-ci.

Answer 4

Je suppose que vous vouliez dire quelque chose pour indiquer une activité en arrière-plan lors d'un appel Ajax.

J'ai tendance à avoir une classe CSS qui définit l'image d'arrière-plan sur un petit GIF animé, avec un remplissage et un positionnement appropriés (n'oubliez pas de désactiver la répétition d'arrière-plan), puis ajoutez et supprimez cette classe à l'aide de quelques assistants JavaScript appelés lorsque l'Ajax l'appel est démarré et lorsque le rappel de réponse s'exécute.