Estilos de spinner

Los hilanderos o los cargadores resultan útiles cuando el usuario tiene que esperar mientras carga una página web. Estos hilanderos ayudan a retener el tráfico de un sitio web durante este período de espera porque les permite al usuario saber que la página se cargará pronto. Sin estos, el usuario puede cerrar la página antes de que se cargue. Este blog destaca cómo se crean y diseñan los hilanderos usando Bootstrap 5.

Cómo crear hilanderos usando Bootstrap 5

Con el fin de crear una ruleta, simplemente asigne el .ritmo de giro clase a los elementos en los que desea agregar el spinner.

Html

Este es un spinner

Aquí estamos insertando una ruleta dentro de un recipiente Div que se envuelve más dentro de otro contenedor Div.

Producción

Un spinner también se conoce como cargador.

Cómo hacer hilanderos coloridos

Puede peinar a sus hilanderos utilizando las clases de utilidades de color disponibles en Bootstrap 5. Aquí hemos usado todas estas clases para hacer hilanderos coloridos

Html

El código anterior generará un total de 9 hilanderos cada uno con un color diferente.

Producción

Así es como puedes hacer hilanderos coloridos.

Cómo crear hilanderos en crecimiento

Otra forma en que puedes diseñar tu spinner es darle un efecto creciente en lugar de un efecto giratorio. Para asignar a su spinner un efecto creciente, use el .crecimiento de la ruleta clase.

Html

Como se muestra en el fragmento de código anterior, puede usar todas las clases de utilidad de color junto con el .Clase de crecimiento spinner para crear hilanderos en crecimiento.

Producción

Se agregó con éxito un efecto creciente a los hilanderos.

Cómo escalar el tamaño de la ruleta

Con el fin de hacer un spinner que sea de menor tamaño que el tamaño predeterminado, use el .spinner-border-sm clase o si desea hacer una pequeña ruleta en crecimiento, use el .spinner-gow-sm.

Html

El fragmento de código generará ambos tipos de hilanderos que están girando y creciendo, teniendo un tamaño pequeño.

Producción

La salida muestra hilanderos que tienen un tamaño más pequeño en comparación con el tamaño predeterminado.

Cómo agregar hilanderos a los botones

A menudo queremos agregar hilanderos a los botones en situaciones cuando el usuario tiene que esperar a que la fuente se cargue después de hacer clic en el botón. Así es como puedes agregar hilanderos a los botones.

Html

Esperar…

En el código anterior, el primer botón agrega una ruleta de tamaño pequeño sin ningún texto. El spinner se creó asignando las clases relevantes al elemento. Mientras tanto, el segundo botón agrega un botón de crecimiento de tamaño pequeño con texto.

Producción

Siguiendo los enfoques discutidos anteriormente, puede crear, estilo y agregar hilanderos a varios elementos.

Conclusión

Se crea un spinner usando el .ritmo de giro clase, mientras que al estilo la ruleta puede usar varias clases de color de texto disponibles que están .presente de texto, .info de texto, .titular de texto, .texto, .muutio, .luz de texto, .amenazador de texto, .oscuridad, y .advertencia de texto. Para darle al spinner un efecto creciente, use el .crecimiento de la ruleta clase, además, para crear un spinner de tamaño pequeño, use el .spinner-border-sm, o .spinner-gow-sm clases. Además, para agregar los hilanderos a los botones que los abarcan dentro del elemento.