Add AJAX Loader

Add AJAX Loader

Pregabalin to buy uk source link Fast implementation of an AJAX loader with animation 

Also see: http://codepen.io/kieranfivestars/pen/mJVZOM
Add:


	 var over = '
' + '
' + '
'; $(over).appendTo('body');

Remove:

$('#overlay').remove();

CSS:
[cc lang=”css” escaped=”true” width=”100%” theme=”default” line_numbers=”on” lines=”-1″]
#overlay {
position: fixed;
left: 0;
height: 100%;
top: 0;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, 0.65);

}
#loading {
width: 60px;
height: 60px;
position: absolute;
top: 50%;
left: 50%;
margin: -28px 0 0 -25px;
}

/*SPINNTER */
.spinner {

width: 32px;
height: 32px;
position: fixed;
left: 50%;
top: 50%;
}

.cube1, .cube2 {
background-color: #333;
width: 10px;
height: 10px;
position: absolute;
top: 0;
left: 0;

-webkit-animation: cubemove 1.8s infinite ease-in-out;
animation: cubemove 1.8s infinite ease-in-out;
}

.cube2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}

@-webkit-keyframes cubemove {
25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
100% { -webkit-transform: rotate(-360deg) }
}

@keyframes cubemove {
25% {
transform: translateX(42px) rotate(-90deg) scale(0.5);
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
} 50% {
transform: translateX(42px) translateY(42px) rotate(-179deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
} 50.1% {
transform: translateX(42px) translateY(42px) rotate(-180deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
} 75% {
transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
} 100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}

/*END SPINNER */