Création de barres de progrès élégantes et réactives à l'aide de ProgressBar.js

Les processus Web, aussi brèves ou longues, nécessitent une rétroaction visuelle. Bien que certaines actions soient instantanées, d'autres - comme le traitement des grandes images - peuvent prendre un temps considérable. Les barres de progrès communiquent efficacement l'activité du site Web en cours aux utilisateurs, empêchant la perception d'une interface gelée. Ce tutoriel montre la création de divers conceptions de barres de progrès à l'aide de la bibliothèque ProgressBar.js.

Construire une barre de progression de base

L'intégration de ProgressBar.js est simple. Compatible avec les principaux navigateurs (y compris IE9), c'est un choix fiable pour tout projet Web. Téléchargez la dernière version à partir de GitHub ou utilisez un lien CDN pour l'inclusion transparente.

Maintenir des ratios d'aspect cohérents entre la barre de progression et son conteneur est crucial pour un affichage optimal. Les cercles nécessitent un rapport d'aspect 1: 1 (la largeur égale de hauteur), les demi-cercles ont besoin de 2: 1 (largeur double la hauteur) et les lignes doivent adhérer à un rapport de 100: traits de trait.

Pour les barres de progression de ligne, de cercle et de demi-cercle, une zone de texte peut mettre à jour dynamiquement les progrès. Avec au moins 100 caractères, la barre passe du rouge au vert lorsque le texte est entré. Un exemple de balisage de base:

<div id="circle-container"></div>

Cette structure simple, ainsi que les paramètres de formulaire et de pas, relie l'écouteur d'événements keydown à la méthode animate(), en utilisant la valeur de la zone de texte. La démo suivante illustre cette fonctionnalité:

Envisagez de l'intégrer à un compteur de résistance de mot de passe pour une application pratique.

Conclusion

ProgressBar.js simplifie la création de styles de barre de progrès variés, offrant un contrôle d'animation sur des attributs tels que la largeur et la couleur. Explorez des exemples supplémentaires pour une inspiration supplémentaire.

La bibliothèque prend également en charge la mise à jour des éléments de texte d'accompagnement pour un affichage de progrès visuel et textuel combiné. Bien que ce tutoriel se concentre sur les barres de progression de base, la documentation complète fournit des détails d'utilisation plus avancés.

Post Thumbnail généré à l'aide d'Openai Dall-e.

apprentissage plus approfondi

Ayant maîtrisé les barres de progression JavaScript, explorez ces tutoriels JavaScript supplémentaires:

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!