hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Construire des barres de progression réactives personnalisées avec ProgressBar.js

Les barres de progression sont largement connues par la plupart des utilisateurs sur le Web. Pour les développeurs, c'est souvent un processus compliqué de créer une barre de progression à partir de zéro . Mais avec ProgressBar.js vous n'avez pas à le faire!

Cette bibliothèque open source gratuite n'a pas de dépendances et supporte tous les principaux navigateurs, y compris IE9 +.

Par défaut, vous pouvez utiliser une barre simple, ou vous pouvez choisir parmi quelques formes de base, telles que:

  • Une seule ligne
  • Demi-cercle
  • Cercle complet
  • Carré
  • Triangle

Vous pouvez également créer vos propres formes personnalisées, comme un cœur, un nuage ou même le lettrage du logo de votre site Web. Certes, cela demandera un peu d'effort, mais le résultat final peut être incroyable.

La bibliothèque fonctionne sur les chemins SVG, donc si vous pouvez construire une forme en utilisant le balisage SVG, vous pouvez l' animer avec cette bibliothèque de barre de progression.

Les animations peuvent également inclure du texte ou avoir des motifs de démarrage / arrêt personnalisés . L'API complète a plus de détails avec des options / rappels que vous pouvez parcourir à votre guise.

ProgressBar.js a également un petit guide d'installation où vous pouvez télécharger et configurer le script en utilisant Bower, npm, ou la page GitHub plus simplifiée.

Et si vous créez quelque chose de cool, vous pouvez soumettre votre code dans le repo GitHub . Le créateur du projet, Kimmo Brunfeldt a un problème GitHub ouvert où vous pouvez soumettre des dessins personnalisés à inclure dans la bibliothèque.

Vous pouvez ajouter des barres de progression animées aux pages d'inscription, aux champs de téléchargement ou à n'importe quelle page Web en tant que préchargeur. Les options ne sont limitées que par le niveau de détail que vous souhaitez obtenir.

Par exemple, j'aime la démo de mesure de force de mot de passe puisqu'elle sert un but réel et avantage l'expérience d'utilisateur . Cet exemple est livré avec le plugin, vous pouvez donc le copier et le modifier à votre guise.

Pour voir plus d'exemples, consultez la page d'accueil ProgressBar.js ou jetez un coup d'œil à ce violon en demo l'animation du cœur.

Freebie Release: Kit d'interface graphique Web (PSD)

Freebie Release: Kit d'interface graphique Web (PSD)

Pour continuer nos remerciements reconnaissants à nos lecteurs et à la communauté en général, nous sommes heureux de publier un kit cadeau très utile - Web Graphical User Interface (GUI) . Ces éléments de GUI viennent dans des formes de vecteur en couches qui signifient que vous pouvez facilement redimensionner les éléments sans perte de qualité.Le kit gra

(Conseils techniques et de conception)

Gérer plusieurs brouillons facilement dans Jekyll

Gérer plusieurs brouillons facilement dans Jekyll

En dépit d'être seulement un site Web statique, nous pouvons utiliser un plugin dans Jekyll aussi. Continuons notre discussion sur la création de brouillons à partir du post précédent. Comme vous pouvez le voir auparavant - dans le post précédent - nous avons créé les brouillons et les avons placés dans un dossier spécial appelé _drafts en premier.Ensuite, com

(Conseils techniques et de conception)