The Web Blinders logo

Programming
☰

10 Pure HTML and CSS Loading animations

When your application is processing something, Instead of showing just Loading text, you could add these loaders using Basic CSS Grids and Animations concepts with out any JavaScript.

EXAMPLE 1

Scroll down for code

*
*
<div class="example1">
    <div>*</div>
    <div>*</div>
</div>

<style>

/* Example 1 */

div.example1 {
    width: 90%;
    margin: 0 auto 0 auto;
    grid-template-columns: repeat(2, 50%);
    display: grid;
    transition: all linear 0.2s;
    color: white;
    text-align: center;
}

div.example1 div {
    padding: 0.5em;
    background-color: black;
    animation-name: example1;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes example1 {
    from {
        transform: rotate(-180deg);
    }
    to {
        transform: rotate(360deg);
    }
} 
</style>
HTML
Copy

EXAMPLE 2

Scroll down for code

*
*
*
<div class="example2">
	<div>*</div>
	<div>*</div>
	<div>*</div>
</div>

<style>
/* Example 2 */

div.example2 {
    width: 90%;
    margin: 0 auto 0 auto;
    grid-template-columns: repeat(3, 33.3%);
    display: grid;
    transition: all linear 0.2s;
    text-align: center;
}

div.example2 div {
    padding: 0.5em;
    animation-name: example2;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    color: white;
}

@keyframes example2 {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(-180deg);
    }
}

div.example2 div:nth-child(odd) {
    background: #8E2DE2;
    background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);
    background: linear-gradient(to right, #4A00E0, #8E2DE2);
}

div.example2 div:nth-child(even) {
    background: #0f0c29;
    background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);
    background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
}
</style>
HTML
Copy

EXAMPLE 3

Scroll down for code

<div class="example3">
	<div></div>
	<div></div>
</div>

<style>

/* Example 3*/

div.example3 {
    width: 90%;
    margin: 0 auto 0 auto;
    grid-template-columns: repeat(2, 50%);
    display: grid;
    transition: all linear 0.1s;
    text-align: center;
}

div.example3 div {
    padding: 2em 0 2em;
    animation-name: example3;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    color: white;
}

@keyframes example3 {
    from {
        transform: scale(0.1, 0.1);
    }
    to {
        transform: scale(1, 1);
    }
}

div.example3 div:nth-child(odd) {
    background: #ad5389;
    background: -webkit-linear-gradient(to right, #3c1053, #ad5389);
    background: linear-gradient(to right, #3c1053, #ad5389);
}

div.example3 div:nth-child(even) {
    background: #ff00cc;
    background: -webkit-linear-gradient(to right, #333399, #ff00cc);
    background: linear-gradient(to right, #333399, #ff00cc);
} 
</style>
HTML
Copy

EXAMPLE 4

Scroll down for code


<div class="example4">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

<style>

/* Example 4 */

div.example4 {
    width: 90%;
    margin: 0 auto 0 auto;
    grid-template-columns: repeat(4, 25%);
    display: grid;
    text-align: center;
}

div.example4 div {
    padding: 2em 0 2em;
    animation-name: example4;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    background: #396afc;
    background: -webkit-linear-gradient(to right, #2948ff, #396afc);
    background: linear-gradient(to right, #2948ff, #396afc);
    color: white;
}

@keyframes example4 {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(-180deg);
    }
}
</style>
HTML
Copy

EXAMPLE 5

Scroll down for code

<div class="example5">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

<style>

/* Example 5 */

div.example5 {
    width: 90%;
    margin: 0 auto 0 auto;
    grid-template-columns: repeat(4, 25%);
    display: grid;
    transition: all linear 0.2s;
    text-align: center;
}

div.example5 div {
    padding: 0.4em;
    animation-name: example5;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    background-color: black;
    color: white;
    margin: 0.1em auto 0.1em auto;
    width: 100%;
}

@keyframes example5 {
    from {
        transform: rotate(-180deg);
    }
    to {
        transform: rotate(360deg);
    }
}
</style>
HTML
Copy

EXAMPLE 6

Scroll down for code

<div class="example6">
	<div></div>
	<div></div>
</div>

<style>

/* Example 6*/

div.example6 {
    width: 90%;
    margin: 0 auto 0 auto;
    grid-template-columns: repeat(2, 50%);
    display: grid;
    transition: all linear 0.1s;
    text-align: center;
}

div.example6 div {
    padding: 2em 0 2em;
    animation-name: example6;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    color: white;
    background-color: blue;
}

@keyframes example6 {
    from {
        transform: rotateX(-180deg);
    }
    to {
        transform: rotateX(360deg);
    }
}

</style>
HTML
Copy

EXAMPLE 7

Scroll down for code


<div class="example7">
	<div></div>
</div>

<style>

/* Example 7*/

div.example7 {
    width: 90%;
    margin: 0 auto 0 auto;
    grid-template-columns: 100%;
    display: grid;
    transition: all linear 0.1s;
    text-align: center;
}

div.example7 div {
    padding: 2em 0 2em;
    animation-name: example7;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    color: white;
    background: rgb(65, 185, 65);
}

@keyframes example7 {
    from {
        transform: rotateY(-180deg);
    }
    to {
        transform: rotateY(360deg);
    }
}
</style>
HTML
Copy

EXAMPLE 8

Scroll down for code

<div class="example8">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

<style>
/* Example 8*/

div.example8 {
    width: 90%;
    margin: 0em auto 0em auto;
    grid-template-columns: repeat(3, 33.3%);
    display: grid;
    transition: all linear 0.1s;
    text-align: center;
}

div.example8 div {
    margin: 0.1em auto 0.1em auto;
    width: 100%;
    padding: 2em 0 2em;
    animation-name: example8;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    color: white;
    background: rgb(223, 125, 44);
}

@keyframes example8 {
    from {
        transform: rotateY(-180deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

</style>
HTML
Copy

EXAMPLE 9

Scroll down for code

<div class="example9"></div>
<div class="example9"></div>
<div class="example9"></div>

<style>

/* Example 9*/

div.example9 {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 0em auto 0em auto;
    border-radius: 50%;
    background-color: teal;
    animation-name: example9;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    text-align: center;
}

@keyframes example9 {
    0% {
        transform: translateY(-50px);
    }
    25% {
        transform: rotateX(-180deg);
    }
    50% {
        transform: scale(0.2, 0.2);
    }
    75% {
        transform: rotateX(360deg);
    }
    90% {
        transform: scale(1, 1);
    }
    100% {
        transform: translateY(50px);
    }
}

</style>
HTML
Copy

EXAMPLE 10

<div class="example10">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

<style>

/* Example 10*/
div.example10 {
    display: grid;
    margin: 0 auto 0 auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    grid-template-columns: repeat(4, 50px);
    grid-template-rows: repeat(4, 50px);
    text-align: center;
}

div.example10 div {
    border-radius: 50%;
    background-color: rgb(30, 0, 128);
    animation-name: example10;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes example10 {
    0% {
        transform: scale(0, 0);
    }
    45% {
        transform: scale(0.4, 0.4);
    }
    90% {
        transform: scale(1, 1);
    }
    100% {
        border-radius: 0%;
    }
}
</style>
HTML
Copy

ALTERNATE TITLES

css loading indicator

html css loaders animation

css loaders examples

css animations examples

html css grids animations
css animations tutorials
Learn javascript , javascript tutorials

Learn html , learn web Development , learn webdesign

Front end tutorials

learn css grids

advances css tutorials

Need developers ?

if so, send a message.

thewebblinders@gmail.com

More Programming from our blog

SEARCH FOR ARTICLES