Hilanderos
Indique el estado de carga de un componente o una página con los indicadores giratorios de Bootstrap, creados completamente con HTML, CSS y sin JavaScript.
Sobre
Los "spinners" de Bootstrap se pueden usar 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 utilidad.
Por motivos de accesibilidad, cada cargador aquí incluye role="status"
un archivo <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
consulta de medios. Consulte la
sección de movimiento reducido de nuestra documentación de accesibilidad .
Hilandero de borde
Utilice los giradores de borde para un indicador de carga ligero.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Colores
El control giratorio de borde se utiliza currentColor
para su border-color
, lo que significa que puede personalizar el color con utilidades de color de texto . Puede usar cualquiera de nuestras utilidades de color de texto en la rueda giratoria estándar.
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
border-color
utilidades? Cada control giratorio de borde especifica un
transparent
borde para al menos un lado, por lo
.border-{color}
que las utilidades anularían eso.
hilandero creciente
Si no te apetece una ruleta de borde, cambia a la ruleta de crecimiento. Si bien técnicamente no gira, ¡crece repetidamente!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Una vez más, esta ruleta está construida con currentColor
, por lo que puede cambiar fácilmente su apariencia con las utilidades de color de texto . Aquí está en azul, junto con las variantes admitidas.
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Alineación
Los spinners en Bootstrap están construidos 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
Use utilidades de margen como .m-5
para facilitar el espaciado.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Colocación
Use las utilidades de flexbox, las utilidades de flotación o las utilidades de alineación de texto para colocar los giradores exactamente donde los necesita en cualquier situación.
Flexionar
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
flotadores
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Texto alineado
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Tamaño
Agregue .spinner-border-sm
y .spinner-grow-sm
para hacer una ruleta más pequeña que se pueda usar rápidamente dentro de otros componentes.
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
O bien, use 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="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Botones
Use los controles giratorios dentro de los botones para indicar que una acción se está procesando o teniendo lugar actualmente. 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" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
Hablar con descaro a
Variables
$spinner-width: 2rem;
$spinner-height: $spinner-width;
$spinner-vertical-align: -.125em;
$spinner-border-width: .25em;
$spinner-animation-speed: .75s;
$spinner-width-sm: 1rem;
$spinner-height-sm: $spinner-width-sm;
$spinner-border-width-sm: .2em;
Fotogramas clave
Usado para crear las animaciones CSS para nuestros spinners. Incluido en scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}