CSS
.spinner {
position: relative;
width: 24px;
height: 24px;
background: #42c5d8;
border-radius: 50%;
}
.spinner:after {
content: '';
position: absolute;
top: 9px;
left: 2px;
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
transform-origin: 10px;
animation: spin 1s linear infinite;
}
.circle {
position: relative;
width: 24px;
height: 24px;
border: 3px solid #e8eaed;
border-top-color: #42c5d8;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
.wave {
position: relative;
width: 32px;
height: 32px;
}
.wave:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: #42c5d8;
display: block;
transform: scale(0);
opacity: 1;
animation: wave 2s ease-out infinite;
}
.wave:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: #42c5d8;
display: block;
transform: scale(0);
opacity: 1;
animation: wave 2s ease-out infinite;
animation-delay: 1s;
}
.cntr {
position: absolute;
top: 45%;
text-align: center;
width: 100%;
}
.cntr > div {
display: inline-block;
margin: 4px 80px;
}
.cntr .pulse {
margin: 0 76px;
}
@-moz-keyframes spin {
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
to {
transform: rotate(360deg);
}
}
@-o-keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@-moz-keyframes wave {
to {
opacity: 0;
transform: scale(1);
}
}
@-webkit-keyframes wave {
to {
opacity: 0;
transform: scale(1);
}
}
@-o-keyframes wave {
to {
opacity: 0;
transform: scale(1);
}
}
@keyframes wave {
to {
opacity: 0;
transform: scale(1);
}
}
