Trobber

Qu'est-ce qu'un throbber ?

Le throbber (de l'anglais throbber — pulsation) est un élément graphique animé qui sert d'indicateur pour les actions en arrière-plan, telles que le chargement de contenu, l'exécution de tâches ou la réalisation de commandes. Cet élément peut être utilisé sur des sites web, dans des applications ou des programmes informatiques. Un exemple classique de throbber est un cercle tournant qui s'affiche dans le navigateur à la place de l'icône de favori pendant le chargement d'une nouvelle page web. Ces indicateurs sont presque toujours présents sur les onglets des navigateurs.

Caractéristiques du throbber

Le throbber, également connu sous le nom d'indicateur d'achèvement asynchrone, est une forme de préchargeur. Contrairement à l'indicateur de progression (barre de progression), qui montre le pourcentage d'achèvement ou le temps restant, le throbber indique simplement que le processus de chargement est en cours. Il a souvent des contours pulsants, créant un effet visuel qui indique que le processus est inachevé. C'est pourquoi le throbber est parfois appelé pulsateur.

À quoi sert un throbber ?

La première utilisation du throbber a eu lieu au début des années 1990 dans le navigateur web NCSA Mosaic, qui a servi de base à Internet Explorer. Les développeurs ont intégré un indicateur d'activité pulsant pour informer les utilisateurs que le navigateur fonctionne et que les pages se chargent. La principale tâche du throbber est de montrer à l'utilisateur que le programme ne s'est pas figé, mais continue d'exécuter des actions.

Fonctions supplémentaires

En plus d'informer sur le processus de chargement, le throbber améliore l'expérience utilisateur sur le site ou le programme. Pendant le chargement de contenu, tels que les styles, les polices et les images, les éléments peuvent se charger de manière inégale. Le throbber masque ces moments peu flatteurs, afin que l'utilisateur ne voie pas d'éléments vides ou mal affichés. De plus, le throbber peut :

• Retenir les utilisateurs en attirant leur attention avec une animation créative.
• Distraire de l'attente, créant l'illusion d'une progression rapide.
• Augmenter la reconnaissance de la marque grâce à des logos ou des inscriptions uniques.

Où utilise-t-on un throbber ?

Le throbber apparaît dans les cas où le chargement d'un site prend plus de temps que prévu, ou lorsqu'il n'y a pas de réponse du serveur. Vous pouvez voir l'icône de chargement aux endroits suivants :

• Sur l'onglet du site dans le navigateur.
• Dans la barre de recherche du navigateur.
• Sur l'écran pendant le chargement de la page.
• Sur les éléments qui se chargent lentement, comme les images ou les vidéos.
• Dans les applications et programmes mobiles.

Le throbber peut complètement masquer la ressource ou permettre d'interagir avec elle, par exemple, annuler le chargement ou revenir à la page d'accueil. Si la ressource est complètement masquée, l'utilisateur doit simplement attendre la fin du chargement.

Variantes de présentation du throbber

Lors de leur première utilisation dans les navigateurs web, les throbbers prenaient la forme d'un logo animé du programme, et cela reste une méthode populaire à ce jour. Par la suite, un symbole circulaire tournant, connu sous le nom de spinner, est apparu et est devenu courant. Il peut être visualisé dans différents styles, en fonction de l'identité de la marque et du design du site.

Les principales exigences pour l'animation de chargement incluent sa dynamisme. Les variantes de préchargeurs les plus courantes incluent :

• Des points clignotants en forme de cercle.
• Des symboles changeants dans les programmes en console.
• Des GIF animés ou des animations CSS.

Comment ajouter un throbber sur un site sans connaissance du code

Pour intégrer une animation de chargement sur un site, il n'est pas nécessaire d'être programmeur. Il existe plusieurs façons simples :

Services spécialisés

Utilisez des services en ligne qui permettent de créer ou de télécharger une animation de chargement et de générer le code à insérer. Exemples de tels services :

• Constructeur de préchargeurs de Hello-site.ru.
• Codepen.
• Loading.io.
• Svgator.
• Générateur de CSS Loader.

Après avoir créé l'animation, il vous suffit de copier le code HTML ou CSS obtenu.

Plugins pour WordPress

Pour les sites sur WordPress, des plugins spécifiques sont disponibles, tels que LoftLoader, WP Smart Preloader ou "Préchargeur". Après installation et activation du plugin, il suffit de choisir le design souhaité et de configurer l'élément.

Fonctions intégrées des constructeurs de sites

Dans certains constructeurs de sites, il existe des fonctions intégrées pour ajouter un throbber ou une animation de chargement. Par exemple, dans Tilda, vous pouvez utiliser l'élément "micro-animation" en ajoutant le bloc "T228" en haut de la page.