Tutoriel Bubble - Animation de chargement pour groupe répétitif

Vidéo d'instructions pas à pas pour les animations de chargement dans la plateforme No-Code Bubble.io

Chris Strobl
Chris Strobl

Dans cette vidéo, vous apprendrez à créer une animation de chargement dans Bubble. En particulier pour les Repeating Groups avec beaucoup de données, il faut parfois un peu de temps pour que le Repeating Group soit chargé. Dans ce cas, une animation de chargement aide l'utilisateur. En effet, l'animation lui permet de voir que l'ordinateur travaille. Nous créons cette meilleure expérience utilisateur (UX) dans Bubble grâce à un plug-in. Le plugin s'appelle Animated Loaders de Yong https://bubble.io/plugin/animated-loaders-1553729425930x287123392710311940

Tutoriel Bubble.io - Animations de chargement pour les groupes répétitifs dans Bubble

Transcriptions vidéo

Bonjour, je m'appelle Chris Strobl et je vous montre aujourd'hui comment créer une animation de chargement dans la bulle. Nous avons ici avec l'API Random User Generator 50 utilisateurs qui sont créés, aussi bien avec une photo de profil qu'avec d'autres choses et cela prend donc un peu de temps. Si vous êtes intéressés par l'utilisation de Random User Generator et la création de profils de démonstration, je vous propose une vidéo ci-dessus.

Pour faire l'animation de chargement, nous allons dans Plugins. Nous installons le plugin Animate Loader. Une fois que vous avez fait cela, nous retournons dans le design et nous voyons maintenant deux loaders différents dans Visual Elements : le loader rouge plain et le loader spinning. J'utilise moi-même chaque Spinning ou nous le déplaçons maintenant dans le canvas centrer. Cet élément est maintenant visible et la page est chargée. Nous posons un conditionnel. Nous disons en effet Si le groupe répétitif de la liste des utilisateurs. Donc le contenu là le count est supérieur à zéro. Cela signifie que le Repeating Group est chargé parce que le nombre d'éléments est supérieur à zéro, alors cet élément n'est plus visible. Nous allons maintenant nous rendre une fois sur Preview pour voir le tout dans son ensemble. Vous avez vu l'animation de chargement, puis l'ensemble du Repeating Group se charge en une seule fois. Et nous avons ainsi pu voir comment insérer assez facilement des animations de chargement de bulles pour que les utilisateurs aient toujours le sentiment que quelque chose est en train de se passer.

Si vous avez aimé cette vidéo, n'hésitez pas à cliquer sur le bouton "J'aime" ou à vous inscrire sur notre chaîne si vous avez des questions. N'hésitez pas à nous envoyer des commentaires. Je vous souhaite beaucoup de succès avec Bubble et vous dis à bientôt.

CaractéristiquesPlugins