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>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>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>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>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>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>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>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>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>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>ALTERNATE TITLES