Styles de spinner

Les filateurs ou les chargeurs s'avèrent utiles lorsque l'utilisateur doit attendre tout en chargeant une page Web. Ces filateurs aident à conserver le trafic d'un site Web pendant cette période d'attente, car ils permettent à l'utilisateur que la page sera bientôt chargée. Sans ceux-ci, l'utilisateur peut fermer la page avant de charger. Ce blog met en évidence comment les filateurs sont créés et stylés à l'aide de bootstrap 5.

Comment créer des filateurs à l'aide de bootstrap 5

Dans le but de créer un spinner, affectez simplement le .fracteur classe aux éléments dans lesquels vous souhaitez ajouter le spinner.

Html

C'est un spinner

Ici, nous insérons un spinner à l'intérieur d'un récipient Div qui est enveloppé dans un autre conteneur div.

Sortir

Un spinner est également appelé chargeur.

Comment faire des filateurs colorés

Vous pouvez styliser vos filateurs en utilisant les cours Color Utilities disponibles dans Bootstrap 5. Ici, nous avons utilisé toutes ces classes pour faire des filateurs colorés

Html

Le code ci-dessus générera un total de 9 filateurs chacun avec une couleur différente.

Sortir

C'est ainsi que vous pouvez faire des filateurs colorés.

Comment créer des filateurs en pleine croissance

Une autre façon dont vous pouvez coiffer votre spinner en lui donnant un effet croissant plutôt qu'un effet de rotation. Pour attribuer à votre spinner un effet croissant, utilisez le .piste de spinner classe.

Html

Comme indiqué dans l'extrait de code ci-dessus, vous pouvez utiliser toutes les classes d'utilité des couleurs avec le .Classe Spinner-Grow pour créer des filateurs croissants.

Sortir

Un effet croissant a été ajouté avec succès aux filateurs.

Comment mettre à l'échelle la taille du spinner

Dans le but de faire un spinner de plus petit que la taille par défaut, utilisez le .Spinner Border-SM classe ou si vous souhaitez faire un petit spinner en pleine croissance, utilisez le .spinner-Grow-SM.

Html

L'extrait de code générera les deux types de filateurs qui tournent et se développent, ayant une petite taille.

Sortir

La sortie montre des filateurs de plus petite taille par rapport à la taille par défaut.

Comment ajouter des filateurs aux boutons

Nous voulons souvent ajouter des filateurs aux boutons dans des situations lorsque l'utilisateur doit attendre que la source se charge après avoir cliqué sur le bouton. Voici comment vous pouvez ajouter des filateurs aux boutons.

Html

Attendez…

Dans le code ci-dessus, le premier bouton ajoute un spinner de petite taille sans aucun texte. Le spinner a été créé en attribuant les classes pertinentes à l'élément. Pendant ce temps, le deuxième bouton ajoute un bouton de croissance de petite taille avec du texte.

Sortir

Suivant les approches discutées ci-dessus, vous pouvez créer, style et ajouter des filateurs à divers éléments.

Conclusion

Un spinner est créé en utilisant le .fracteur classe, en attendant pour styliser le spinner, vous pouvez utiliser diverses classes de couleurs de texte disponibles qui sont .texto-primaire, .texto, .succès texte, .texte-secondaire, .en texte, .luminaire, .danger de texte, .dark de texte, et .avance de texte. Pour donner au spinner un effet croissant utilisez le .piste de spinner classe, en outre, pour créer un spinner de petite taille .Spinner Border-SM, ou .spinner-Grow-SM Des classes. De plus, pour ajouter des filateurs aux boutons les écartez à l'intérieur de l'élément.