CSS:
.loader {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s infinite ease-in-out; /* linear */
margin: 20px auto;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
HTML:
<div class="loader"></div>
3D loader
CSS:
.loader-3d {
transform: rotateZ(45deg);
perspective: 1000px;
border-radius: 50%;
width: 120px;
height: 120px;
color: #3498db;
margin: 50px auto;
}
.loader-3d:before,
.loader-3d:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
border-radius: 50%;
transform: rotateX(70deg);
animation: 1s spin linear infinite;
}
.loader-3d:after {
color: #999;
transform: rotateY(70deg);
animation-delay: 0.4s;
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotateZ(0deg);
}
100% {
transform: translate(-50%, -50%) rotateZ(360deg);
}
}
@keyframes rotateccw {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
@keyframes spin {
0%,
100% {
box-shadow: 0.2em 0 0 0 currentcolor;
}
12% {
box-shadow: 0.2em 0.2em 0 0 currentcolor;
}
25% {
box-shadow: 0 0.2em 0 0 currentcolor;
}
37% {
box-shadow: -0.2em 0.2em 0 0 currentcolor;
}
50% {
box-shadow: -0.2em 0 0 0 currentcolor;
}
62% {
box-shadow: -0.2em -0.2em 0 0 currentcolor;
}
75% {
box-shadow: 0 -0.2em 0 0 currentcolor;
}
87% {
box-shadow: 0.2em -0.2em 0 0 currentcolor;
}
}
HTML:
<div class="loader-3d"></div>
Links: