Pulse Circle Loader
HTML
<div class="pulse-circle"></div>
CSS
.pulse-circle {
width: 32px;
height: 32px;
background: #48f;
opacity: .5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-animation: pulse 2s infinite; /* Safari 4+ */
-moz-animation: pulse 2s infinite; /* Fx 5+ */
-o-animation: pulse 2s infinite; /* Opera 12+ */
animation: pulse 2s infinite; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}
50% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}
}
@-moz-keyframes pulse {
0% {
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}
50% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}
}
@-o-keyframes pulse {
0% {
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}
50% {
-webkit-transform: scale(1);
...