Load animations in Quickly

With quickly , you can easily incorporate cargo animations sequences, which add dynamism to your websites. Explore a wide variety of styles and effects to give life to your digital projects. With adequate load animations, you will have the ability to create fluid and memorable user experiences.

losSpinners

We have five different types of spinners.In addition, you can adjust your dimensions using classes 'wh-8', 'wh-16', 'wh-24', And so on.Check our section of widths and highs for more information about it.

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

Class Description
.spinner-1 A quarter of a circle in rotation.
.spinner-2 Two quarterfinals in rotation.
.spinner-3 Ring of rotating circles.
.spinner-4 A degraded semicircle.
.spinner-5 A semicircle in rotation.

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>

Colors in Spinner

You can customize the colors of spinners by applying additional classes.

Applied colors

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 in buttons

Add load animations to the buttons to add more dynamism to your design.

Animations

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