Créez des spiners et des chargeurs à élément unique avec CSSPIN
Vous pouvez construire des choses incroyables avec CSS3, à partir de champs de saisie personnalisés à des menus déroulants et même graphiques vectoriels. Ces techniques sont dépassant rapidement JavaScript, permettant aux développeurs de créer de meilleures expériences utilisateur.
Une des choses les plus délicates à construire est un chargement spinner animation mais l'animation CSS moderne rend même cela assez simple.
Pour gagner du temps, vous pouvez utiliser une bibliothèque telle que CSSPIN avec des tonnes de fileuses personnalisées prédéfinies. Toutes ces animations sont libres de cloner et totalement open source, vous avez donc accès total pour éditer le code comme bon vous semble.
Mettre en place un disque avec cette bibliothèque est un jeu d'enfant. Vous venez copier la bibliothèque CSS dans votre page, alors ajouter les éléments HTML personnalisés où que vous vouliez qu'ils apparaissent.
Ces fileuses personnalisées n'utilisent que un élément HTML pour créer l'effet d'animation. C’est énorme parce que le graphique et l’effet d’animation sont rendu uniquement à travers des classes CSS.
Et, puisque vous avez accès au code source, vous pouvez remplacer les formes, les couleurs, les tailles et les vitesses d'animation pour mieux convenir à vos projets.
Il suffit de noter le code utilise la syntaxe LESS, vous devrez donc vous familiariser avec ce langage de prétraitement pour effectuer des modifications majeures..
Mais, vous pouvez trouver beaucoup de exemples CSS simples sur la page de démonstration principale, avec instructions simples sur la page GitHub.
Si vous connaissez npm ou Tonnelle ceux-ci sont méthodes alternatives pour installer la bibliothèque.
Quelle que soit la méthode d’installation, il s’agit d’une excellente bibliothèque d’animation CSS. C'est le destin entièrement modulaire avec beaucoup d'espace pour les nouveaux fileurs, les nouvelles animations et les personnalisations d'autres développeurs.
Pour en savoir plus et parcourir toute la documentation, consultez la section Repo CSSPIN sur GitHub. Le créateur a également fait un petit vidéo d'installation que vous pouvez regarder ci-dessous.
