Estilos de spinner
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
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.