galaxy/loaders/ClawHack1_evil-panda-55.html

59 lines
980 B
HTML

<div class="loader">
<div class="loader__circle"></div>
<div class="loader__circle"></div>
<div class="loader__circle"></div>
<div class="loader__circle"></div>
</div>
<style>
/* From Uiverse.io by ClawHack1 - Tags: loader */
.loader {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.loader__circle {
width: 14px;
height: 14px;
border-radius: 50%;
margin: 0 4px;
animation: loader_901 1s ease-in-out infinite;
}
.loader__circle:nth-of-type(1) {
background-color: #007aff;
animation-delay: 0;
}
.loader__circle:nth-of-type(2) {
background-color: #ff2d55;
animation-delay: 0.25s;
}
.loader__circle:nth-of-type(3) {
background-color: #34c759;
animation-delay: 0.5s;
}
.loader__circle:nth-of-type(4) {
background-color: #ff9500;
animation-delay: 0.75s;
}
@keyframes loader_901 {
0% {
transform: scale(1);
}
20% {
transform: scale(1.2);
}
40% {
transform: scale(1);
}
}
</style>