Indicar el estado de carga de un componente o página con los spinners de Bootstrap, construidos enteramente con HTML, CSS y sin JavaScript.
Acerca de
Los «spinners» de Bootstrap se pueden utilizar para mostrar el estado de carga en tus proyectos. Están construidos sólo con HTML y CSS, lo que significa que no necesitas ningún JavaScript para crearlos. Sin embargo, necesitarás algo de JavaScript personalizado para alternar su visibilidad. Su apariencia, alineación y tamaño se pueden personalizar fácilmente con nuestras increíbles clases de utilidad.
Para fines de accesibilidad, cada cargador aquí incluye role="status"
<span class="sr-only">Loading...</span> anidado.
Border spinner
Utiliza los spinners de los bordes para un indicador de carga ligero.
<div class="spinner-border" role="status"> <span class="sr-only">Loading...</span></div>Colores
El spinner del borde utiliza currentColor para su border-color, lo que significa que puedes personalizar el color con las utilidades de color de texto. Puedes utilizar cualquiera de nuestras utilidades de color de texto en el spinner estándar.
¿Por qué no utilizar las utilidades border-color? Cada spinner de borde especifica un transparent borde para al menos un lado, así que .border-{color} las utilidades anularían eso.
Growing spinner
Si no te apetece un spinner de borde, cambia al grow spinner. Aunque técnicamente no gira, ¡crece repetidamente!
<div class="spinner-grow" role="status"> <span class="sr-only">Loading...</span></div>Una vez más, este spinner está construido con currentColor, por lo que puedes cambiar su apariencia fácilmente con utilidades de color de texto. Aquí está en azul, junto con las variantes soportadas.
Alineación
Los spinners en Bootstrap se construyen con rems, currentColor, y display: inline-flex. Esto significa que pueden ser fácilmente redimensionados, recoloreados y alineados rápidamente.
Margen
Utiliza utilidades de margen como .m-5 para facilitar el espaciado.
<div class="spinner-border m-5" role="status"> <span class="sr-only">Loading...</span></div>Colocación
Usa utilidades de flexbox, utilidades de flotación o utilidades de alineación de texto para colocar los spinners exactamente donde los necesitas en cualquier situación.
Flex
<div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="sr-only">Loading...</span> </div></div>Flotadores
<div class="clearfix"> <div class="spinner-border float-right" role="status"> <span class="sr-only">Loading...</span> </div></div>Alineación del texto
<div class="text-center"> <div class="spinner-border" role="status"> <span class="sr-only">Loading...</span> </div></div>Tamaño
Add .spinner-border-sm y .spinner-grow-sm para hacer un spinner más pequeño que pueda utilizarse rápidamente dentro de otros componentes.
O bien, utiliza CSS personalizado o estilos en línea para cambiar las dimensiones según sea necesario.
Botones
Utiliza los spinners dentro de los botones para indicar que se está procesando o realizando una acción. También puedes cambiar el texto del elemento spinner y utilizar el texto del botón según sea necesario.
0 comentarios