Estilos

Componentes

Formularios

Organismos

Spinner

Un spinner es un indicador visual que ayuda a notificar a las personas usuarias que la carga de contenido o la recuperación de datos está en curso.

Si quieres conocer las buenas prácticas de uso del componente, puedes visitar el siguiente enlace.

Tipos


    <div class="spinner-border text-primary" role="status">
        <span class="sr-only">Cargando...</span>
    </div>
    <div class="spinner-border text-secondary" role="status">
        <span class="sr-only">Cargando...</span>
    </div>
    <div class="spinner-border text-success" role="status">
        <span class="sr-only">Cargando...</span>
    </div>
    <div class="spinner-border text-danger" role="status">
        <span class="sr-only">Cargando...</span>
    </div>
    <div class="spinner-border text-info" role="status">
        <span class="sr-only">Cargando...</span>
    </div>
    <div class="spinner-border text-light" role="status">
        <span class="sr-only">Cargando...</span>
    </div>
    <div class="spinner-border text-dark" role="status">
        <span class="sr-only">Cargando...</span>
    </div>

Tamaños


    <div class="spinner-border text-primary spinner-border-sm" role="status">
        <span class="sr-only">Cargando...</span>
    </div>
    <div class="spinner-border text-primary" role="status">
        <span class="sr-only">Cargando...</span>
    </div>
    <div class="spinner-border text-primary spinner-border-lg" role="status">
        <span class="sr-only">Cargando...</span>
    </div>

Expandible


    <div class="col-4 col-md-2 mx-auto">
        <div class="spinner-block text-primary" role="status">
            <span class="sr-only">Cargando...</span>
        </div>
    </div>