پیشنمایش زنده
کد HTML
<div class="loader"></div>
کد CSS
.loader {
position: relative;
font-size: 16px;
width: 5.5em;
height: 5.5em;
transform: scale(1.6);
}
.loader:before {
content: "";
position: absolute;
transform: translate(-50%, -50%) rotate(90deg);
height: 50%;
width: 24px;
background: #f6f6f6;
box-shadow: none;
border-radius: 50%;
left: 50%;
top: 50%;
animation: bounce1 1s ease-in-out infinite;
}
.loader:after {
content: "";
position: absolute;
left: 2.24em;
top: 1.72em;
width: 1em;
height: 0.96em;
background-color: #0cffaa;
border-radius: 50%;
animation: bounce2 1s ease-in-out infinite;
}
@keyframes bounce1 {
90% {
top: 49%;
box-shadow: 2px 0 0#0cffaa;
}
}
@keyframes bounce2 {
50% {
top: -0.24em;
height: 1em;
}
75% {
top: -0.26em;
height: 1em;
}
}