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="sr-only">Loading...</span>.
Spinner de borde
Use os xiradores de bordo para un indicador de carga lixeiro.
Cargando...
Cores
O xiro de bordo usa currentColorpara 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.
Cargando...
Cargando...
Cargando...
Cargando...
Cargando...
Cargando...
Cargando...
Cargando...
Por que non usar border-colorutilidades? Cada xirador de bordo especifica un transparentbordo 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!
Cargando...
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.
Cargando...
Cargando...
Cargando...
Cargando...
Cargando...
Cargando...
Cargando...
Cargando...
Aliñación
Os spinners en Bootstrap están construídos con rems, currentColor, e display: inline-flex. Isto significa que poden cambiar o tamaño, cambiar a cor e aliñarse rapidamente.
Engade .spinner-border-sme .spinner-grow-smpara facer un xiro máis pequeno que se pode usar rapidamente dentro doutros compoñentes.
Cargando...
Cargando...
Ou, use CSS personalizados ou estilos en liña para cambiar as dimensións segundo sexa necesario.
Cargando...
Cargando...
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.