Spinners
Indique el estado de carga de un componente o página con spinners Bootstrap, construido completamente con HTML, CSS y sin JavaScript.
Acerca de
Los “spinners” de Bootstrap se pueden utilizar para mostrar el estado de carga en sus proyectos. Están construidos solo con HTML y CSS, lo que significa que no necesita JavaScript para crearlos. Sin embargo, necesitará JavaScript personalizado para alternar su visibilidad. Su apariencia, alineación y tamaño se pueden personalizar fácilmente con nuestras increíbles clases de servicios públicos.
Por motivos de accesibilidad, cada cargador aquí incluye
role="status"
un archivo
<span class="sr-only">Loading...</span>.
Border spinner
Utilice las ruedecillas de borde para un indicador de carga ligero.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>Colores
El control giratorio de bordes utiliza
currentColor
para ello
border-color
, lo que significa que puede personalizar el color con
las utilidades de color del texto
. Puede utilizar cualquiera de nuestras utilidades de color de texto en la ruleta estándar.
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-gray" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-tertiary" role="status">
<span class="sr-only">Loading...</span>
</div>
¿Por qué no utilizar
border-color
utilidades?
Cada control giratorio de borde especifica un
transparent
borde para al menos un lado, por lo que los
.border-{color}
servicios públicos lo anularían.
Growing spinner
Si no le apetece una ruleta de borde, cambie a la ruleta de cultivo. Si bien técnicamente no gira, ¡crece repetidamente!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Una vez más, esta ruleta está construida con
currentColor
, por lo que puede cambiar fácilmente su apariencia con
utilidades de color de texto
. Aquí está en azul, junto con las variantes compatibles.
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-gray" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-tertiary" role="status">
<span class="sr-only">Loading...</span>
</div>
Alineación
Los spinners en Bootstrap se crean con
rem
s
currentColor
, y
display: inline-flex
. Esto significa que se pueden cambiar de tamaño, cambiar de color y alinear rápidamente.
Margen
Utilice
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
Utilice las utilidades flexbox , las utilidades flotantes o las utilidades de alineación de texto para colocar los rotuladores exactamente donde los necesite en cualquier situación.
Flexionar
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>Flotadores
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>Texto alineado
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>Talla
Agregue
.spinner-border-sm
y
.spinner-grow-sm
para hacer una ruleta más pequeña que pueda usarse rápidamente con otros componentes.
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
</div>O utilice CSS personalizado o estilos en línea para cambiar las dimensiones según sea necesario.
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>Botones
Utilice las flechas giratorias dentro de los botones para indicar que una acción se está procesando o se está realizando. También puede cambiar el texto del elemento giratorio y utilizar el texto del botón según sea necesario.
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"></span>
Loading...
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm align-middle" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm align-middle" role="status" aria-hidden="true"></span>
Loading...
</button>