Animaciones de Carga

Con Quickly, puedes incorporar fácilmente secuencias de animaciones de carga, las cuales añaden dinamismo a tus sitios web. Explora una amplia variedad de estilos y efectos para dar vida a tus proyectos digitales. Con las animaciones de carga adecuadas, tendrás la capacidad de crear experiencias de usuario fluidas y memorables.

Los spinners

Disponemos de cinco tipos de spinners diferentes. Además, puedes ajustar sus dimensiones utilizando las clases 'wh-8', 'wh-16', 'wh-24', y así sucesivamente. Consulta nuestra sección de anchos y altos para obtener más información al respecto.

.spinner-n° (1,2,3,4,5)

Clase Descripción
.spinner-1 Un cuarto de círculo en rotación.
.spinner-2 Dos cuartos de círculo en rotación.
.spinner-3 Anillo de círculos giratorio.
.spinner-4 Un semicírculo degradado.
.spinner-5 Un semicírculo en rotación.

Animaciones

Spinner-1
Spinner-2
Spinner-3
Spinner-4
Spinner-5
HTML 
                                    
    <div class="spinner-1 wh-32"></div>
    <div class="spinner-2 wh-32"></div>
    <div class="spinner-3 wh-32"></div>
    <div class="spinner-4 wh-32"></div>
    <div class="spinner-5 wh-32"></div>

Colores en spinner

Puedes personalizar los colores de los spinners aplicando clases adicionales.

Colores aplicados

Spinner-1
Spinner-2
Spinner-3
Spinner-4
Spinner-5
HTML 
                                    
    <!-- Spinner-1 -->
    <div class="spinner-1 wh-32 spinner-1-info"></div>
    <div class="spinner-1 wh-32 spinner-1-danger"></div>
    <div class="spinner-1 wh-32 spinner-1-warning"></div>
    <div class="spinner-1 wh-32 spinner-1-success"></div>
    <div class="spinner-1 wh-32 spinner-1-white"></div>
    <div class="spinner-1 wh-32 spinner-1-black"></div>

    <!-- Spinner-2 -->
    <div class="spinner-2 wh-32 spinner-2-info"></div>
    <div class="spinner-2 wh-32 spinner-2-danger"></div>
    <div class="spinner-2 wh-32 spinner-2-warning"></div>
    <div class="spinner-2 wh-32 spinner-2-success"></div>
    <div class="spinner-2 wh-32 spinner-2-white"></div>
    <div class="spinner-2 wh-32 spinner-2-black"></div>

    <!-- Spinner-3 -->
    <div class="spinner-3 wh-32 spinner-3-info"></div>
    <div class="spinner-3 wh-32 spinner-3-danger"></div>
    <div class="spinner-3 wh-32 spinner-3-warning"></div>
    <div class="spinner-3 wh-32 spinner-3-success"></div>
    <div class="spinner-3 wh-32 spinner-3-white"></div>
    <div class="spinner-3 wh-32 spinner-3-black"></div>

    <!-- Spinner-4 -->
    <div class="spinner-4 wh-32 spinner-4-info"></div>
    <div class="spinner-4 wh-32 spinner-4-danger"></div>
    <div class="spinner-4 wh-32 spinner-4-warning"></div>
    <div class="spinner-4 wh-32 spinner-4-success"></div>
    <div class="spinner-4 wh-32 spinner-4-white"></div>
    <div class="spinner-4 wh-32 spinner-4-black"></div>

    <!-- Spinner-5 -->
    <div class="spinner-5 wh-32 spinner-5-info"></div>
    <div class="spinner-5 wh-32 spinner-5-danger"></div>
    <div class="spinner-5 wh-32 spinner-5-warning"></div>
    <div class="spinner-5 wh-32 spinner-5-success"></div>
    <div class="spinner-5 wh-32 spinner-5-white"></div>
    <div class="spinner-5 wh-32 spinner-5-black"></div>

Spinner en botones

Añade animaciones de carga a los botones para agregar más dinamismo a tu diseño.

Animaciones

HTML 
                                    
    <button type="button" class="btn btn-primary"><span class="wh-16 spinner-1 spinner-1-white mr-1"></span>Cargando</button>
    <button type="button" class="btn btn-primary"><span class="wh-16 spinner-2 spinner-2-white mr-1"></span>Cargando</button>
    <button type="button" class="btn btn-primary"><span class="wh-16 spinner-3 spinner-3-white mr-1"></span>Cargando</button>
    <button type="button" class="btn btn-primary"><span class="wh-16 spinner-4 spinner-4-white mr-1"></span>Cargando</button>
    <button type="button" class="btn btn-primary"><span class="wh-16 spinner-5 spinner-5-white mr-1"></span>Cargando</button>