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.

Créez facilement des animations CSS cool avec Animista

Créez facilement des animations CSS cool avec Animista

Il y a des tonnes d'applications web d'animation CSS en ligne . Mais, très peu se comparent au niveau de détail et de facilité d'utilisation que vous obtenez avec Animista .Cette application web gratuite vous permet de générer des animations CSS personnalisées en cliquant sur un bouton . Vous

(Conseils techniques et de conception)

Twitter vs Weibo: 8 choses Twitter peuvent apprendre de la dernière

Twitter vs Weibo: 8 choses Twitter peuvent apprendre de la dernière

Sina Weibo n'est pas une blague. C'est le service de microblogging le plus chaud en Chine maintenant. Il consomme 90% des parts de marché des services de microblogging en Chine, avec plus de 140 millions d'utilisateurs en moins de 2 ans, tandis que Twitter a gagné 200 millions d'utilisateurs en moins de 5 ans.

(Conseils techniques et de conception)