Spinners
Indique o estado de carga dun compoñente ou páxina con spinners Bootstrap, construídos integramente con HTML, CSS e sen JavaScript.
Sobre
Os "spinners" de arranque pódense usar para mostrar o estado de carga dos teus proxectos. Están construídos só con HTML e CSS, o que significa que non necesitas JavaScript para crealos. Non obstante, necesitarás JavaScript personalizado para cambiar a súa visibilidade. O seu aspecto, aliñamento e tamaño pódense personalizar facilmente coas nosas incribles clases de utilidade.
Para propósitos de accesibilidade, cada cargador inclúe aquí role="status"
e un <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
consulta multimedia. Consulta a
sección de movemento reducido da nosa documentación de accesibilidade .
Spinner de borde
Use os xiradores de bordo para un indicador de carga lixeiro.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Cores
O xiro de bordo usa currentColor
para o seu border-color
, o que significa que pode personalizar a cor coas utilidades de cor de texto . Podes usar calquera das nosas utilidades de cor de texto no xiro 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 xirador de bordo especifica un
transparent
bordo para polo menos un lado, polo
que as .border-{color}
utilidades anularían iso.
Spinner en crecemento
Se non che apetece un spinner de borde, cambia ao grow spinner. Aínda que tecnicamente non xira, crece repetidamente!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Unha vez máis, este xiro está construído con currentColor
, polo que pode cambiar facilmente o seu aspecto coas utilidades de cor de texto . Aquí está en azul, xunto coas 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>
Aliñación
Os spinners en Bootstrap están construídos con rem
s, currentColor
, e display: inline-flex
. Isto significa que poden cambiar o tamaño, cambiar a cor e aliñarse rapidamente.
Marxe
Use utilidades de marxe como .m-5
para facilitar o espazo.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Colocación
Use as utilidades flexbox , as utilidades flotantes ou as utilidades de aliñamento de texto para colocar os spinners exactamente onde os precise en calquera situación.
Dobrar
<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>
Aliñación de texto
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Tamaño
Engade .spinner-border-sm
e .spinner-grow-sm
para facer un xiro máis pequeno que se pode usar rapidamente dentro doutros compoñentes.
<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>
Ou, use CSS personalizados ou estilos en liña para cambiar as dimensións segundo sexa 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>
Botóns
Usa os xiradores dentro dos botóns para indicar que se está a procesar ou a realizar unha acción. Tamén pode cambiar o texto do elemento xiratorio e utilizar o texto do botón segundo sexa 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>
Sass
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 animacións CSS para os nosos spinners. Incluído 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;
}
}