<div class="loading26">
<span class="round26"></span>
<span class="round26"></span>
<span class="round26"></span>
<span class="round26"></span>
</div>
.loading26{
width: 90px;
height: 90px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
animation: loading26-eff 3s linear infinite;
}
@keyframes loading26-eff{
0%{
transform: scale(1) rotate(0);
}
20%{
transform: scale(1) rotate(72deg);
}
40%{
transform: scale(0.5) rotate(144deg);
}
60%{
transform: scale(0.5) rotate(216deg);
}
80%{
transform: scale(1) rotate(288deg);
}
100%{
transform: scale(1) rotate(360deg);
}
}
.round26{
width: 40px;
height: 40px;
display: block;
border-radius: 20px 20px 20px 20px;
box-sizing: border-box;
}
.round26:nth-of-type(1){
background-color: #50DE68;
animation: round-eff261 3s linear infinite;
}
.round26:nth-of-type(2){
background-color: #3DC453;
animation: round-eff262 3s linear infinite;
}
.round26:nth-of-type(3){
background-color: #14BE71;
animation: round-eff263 3s linear infinite;
}
.round26:nth-of-type(4){
background-color: #78DE35;
animation: round-eff264 3s linear infinite;
}
@keyframes round-eff261{
0%{
border-radius: 20px 20px 20px 20px 20px;
}
20%{
border-radius: 20px 20px 20px 20px;
}
40%{
border-radius: 20px 20px 0 20px;
}
60%{
border-radius: 20px 20px 0 20px;
}
80%{
border-radius: 20px 20px 20px 20px 20px;
}
100%{
border-radius: 20px 20px 20px 20px 20px;
}
}
@keyframes round-eff262{
0%{
border-radius: 20px 20px 20px 20px 20px;
}
20%{
border-radius: 20px 20px 20px 20px;
}
40%{
border-radius: 20px 20px 20px 0;
}
60%{
border-radius: 20px 20px 20px 0;
}
80%{
border-radius: 20px 20px 20px 20px 20px;
}
100%{
border-radius: 20px 20px 20px 20px 20px;
}
}
@keyframes round-eff263{
0%{
border-radius: 20px 20px 20px 20px 20px;
}
20%{
border-radius: 20px 20px 20px 20px;
}
40%{
border-radius: 20px 0 20px 20px;
}
60%{
border-radius: 20px 0 20px 20px;
}
80%{
border-radius: 20px 20px 20px 20px 20px;
}
100%{
border-radius: 20px 20px 20px 20px 20px;
}
}
@keyframes round-eff264{
0%{
border-radius: 20px 20px 20px 20px 20px;
}
20%{
border-radius: 20px 20px 20px 20px;
}
40%{
border-radius: 0 20px 20px 20px;
}
60%{
border-radius: 0 20px 20px 20px;
}
80%{
border-radius: 20px 20px 20px 20px 20px;
}
100%{
border-radius: 20px 20px 20px 20px 20px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.