Créez facilement une barre de progression de la conception de matériaux avec Mprogress.js
On ne peut nier que Google conception matérielle a radicalement changé le web. Il offre un langage de conception commun que les concepteurs d'interface utilisateur peuvent appliquer à tous les sites Web et applications mobiles.
Cette tendance en matière de conception de matériaux a conduit à de nombreuses bibliothèques, y compris le populaire framework Materialize. Et l'un des plus cool nouveaux projets de matériaux J'ai trouvé est Mprogress.js.
Cette bibliothèque JavaScript génère un barre de progression matérielle Utilisation de CSS et de JavaScript purs. Pas de dépendances, pas de bêtises. Un simple chargement (et un préchargement) avec un design de matériel qui correspond à n'importe quel site Web ou application Web.
La configuration est assez simple et nécessite seulement deux fichiers: un CSS et un script JS de Mprogress.
Vous pouvez télécharger les deux depuis le repo GitHub ou utiliser un gestionnaire de paquets comme npm ou Bower. A partir de là, vous devez créer un nouvel objet Mprogress et dites-lui de démarrer le chargeur.
Cela peut être fait avec littéralement une ligne de code:
var mprogress = new Mprogress ('start'); Autres propriétés peut être appliqué pour modifier le minutage, la vitesse ou la couleur d'affichage de la barre de progression. Cette configuration vous permet même créer des modèles personnalisés basé sur le style de conception de matériau par défaut. Impressionnant!
Jetez un coup d'oeil au page de démonstration pour voir ce chargeur en action. Ce n’est pas une barre de chargement hypnotique, mais elle offre une solution intéressante sans que vous ayez besoin de la construire à partir de zéro..
Vous pouvez exécuter des méthodes comme ensemble() à fixer un pourcentage ou inc () à incrémenter la barre de chargement. Il peut être géré par programme pour créer un chargeur HTTP, mais cela nécessite un travail supplémentaire en JavaScript..
La beauté de Mprogress.js est sa simplicité. Il ne vous dit pas comment structurer les données ni ce que vous devez charger. Cela pourrait être le chargement de la page ou le téléchargement d'un fichier. Ou il pourrait être suivi jusqu'à quelle distance l'utilisateur a fait défiler du haut de la page.
Il y a tellement de choses que vous pouvez faire avec cette bibliothèque et avec zéro dépendance vous pouvez l'utiliser pour n'importe quel projet web. Pour commencer, consultez la MProgress repo sur GitHub où vous pouvez également parcourir la Documentation.
