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


Créer un effet de chargement intégré dans les boutons avec LADDA

Il existe différents types d'animation que vous pouvez appliquer dans votre page Web. Animation pour le texte, la boîte modale, la transition et l'indicateur de progression. Pour les indicateurs de progression, généralement sous la forme de barres, les progrès que vous voyez sur la barre indiquent les progrès réalisés (ou chargés). Si toutefois vous êtes intéressé par les progrès à l'intérieur d'un bouton, essayez Ladda.

Ladda est un plugin jQuery fait par Hakim El Hattab pour vous donner l' effet de chargement à l'intérieur d'un bouton . C'est un concept d'assurance-chômage qui sépare efficacement l'écart entre l'action et la rétroaction. Les utilisateurs recevront un retour sous la forme d'un indicateur de chargement au lieu d'avoir à quitter la page. Il existe également une version de Ladda pour WordPress disponible.

Utilisation basique

Ladda peut être utilisé comme un plugin autonome qui n'a pas besoin d'autres dépendances. Pour commencer, vous devez d'abord inclure à la fois les fichiers ladda.min.js et spin.min.js que vous pouvez obtenir depuis la page GitHub de votre projet, comme cela.

Pour que le bouton applique les thèmes Ladda par défaut, chargez le fichier CSS de ladda.min.css . Si vous ne voulez que les boutons fonctionnels sans le thème, chargez le fichier ladda-themeless.min.css .

Balisage HTML

Pour que Ladda fonctionne, vous devez inclure la classe ladda-button dans le bouton. Voici un exemple:

  

Ladda vous fournit également des options dans le code HTML en utilisant les attributs de données pour le style de bouton. Comme vous pouvez le voir ci-dessus, le bouton utilise data-style de data-style pour le data-style d'animation. Pour appliquer un style différent, vous pouvez consulter la liste complète dans la page de démonstration.

Pour changer la couleur, vous pouvez utiliser data-color . Pour la taille du bouton, incluez la taille des data-size sur le bouton.

Fusionner avec le serveur

Et maintenant, pour soumettre l'animation de chargement au serveur (qui rechargera la page après l'animation), nous aurons besoin de la méthode bind() . Cela va lier les boutons de progression et simuler la progression du chargement:

Vous pouvez également contrôler vos boutons en utilisant l'API Javascript avec l'approche suivante:

Conclusion

Avec le support de Bootstrap et la réactivité, Ladda vaut la peine d'être essayée dans votre projet. En outre, il a été testé et il fonctionne bien dans la dernière version de Chrome, Firefox, Safari ainsi que IE9 et au-dessus. N'hésitez pas à nous faire savoir ce que vous pensez dans la boîte de commentaires ci-dessous.

La vérité sur la passion et comment elle vous affecte

La vérité sur la passion et comment elle vous affecte

Aujourd'hui, je vais à contre-courant et je vous pose une question que vous vous posez peut-être dernièrement. Au cours des dernières années, on a beaucoup parlé de «trouver sa passion», surtout lorsqu'il s'agit de travail créatif. Il semble que tout le monde se démène pour découvrir ce travail parfait qui allie l'enthousiasme à un salaire colossal .Mais attende

(Conseils techniques et de conception)

Bulma est le seul framework CSS optimisé par Flexbox dont vous aurez besoin

Bulma est le seul framework CSS optimisé par Flexbox dont vous aurez besoin

Flexbox est un sujet brûlant pour les développeurs frontend car il offre une approche moderne des alignements CSS . La plupart des mises en page de sites s'appuient sur des flottants CSS ou des pourcentages fixes pour maintenir les blocs de contenu en ligne.Mais flexbox change toutes les règles et avec un framework comme Bulma vous pouvez construire des mises en page complètes sur flexbox . C&

(Conseils techniques et de conception)