galaxy/loaders/mobinkakei_curly-fish-45.html

77 lines
No EOL
1.7 KiB
HTML

<span class="loader"></span>
<style>
/* From Uiverse.io by mobinkakei - Tags: loading, loader, creative */
.loader {
width: 54px;
height: 54px;
position: relative;
border-radius: 4px;
background-color: #fff;
background-image: radial-gradient(circle 5px, #19191a 100%, transparent 0),
radial-gradient(circle 5px, #19191a 100%, transparent 0),
radial-gradient(circle 5px, #19191a 100%, transparent 0),
radial-gradient(circle 5px, #19191a 100%, transparent 0),
radial-gradient(circle 5px, #19191a 100%, transparent 0),
radial-gradient(circle 5px, #19191a 100%, transparent 0);
background-repeat: no-repeat;
animation: move 4s linear infinite, rotate 2s linear infinite;
}
@keyframes rotate {
0%,
20% {
transform: rotate(0deg);
}
30%,
40% {
transform: rotate(90deg);
}
50%,
60% {
transform: rotate(180deg);
}
70%,
80% {
transform: rotate(270deg);
}
90%,
100% {
transform: rotate(360deg);
}
}
@keyframes move {
0%,
9% {
background-position: -12px -15px, -12px 0px, -12px 15px, 12px -15px,
12px 0px, 12px 15px;
}
10%,
25% {
background-position: 0px -15px, -12px 0px, -12px 15px, 34px -15px, 12px 0px,
12px 15px;
}
30%,
45% {
background-position: 0px -34px, -12px -10px, -12px 12px, 34px -15px,
12px -10px, 12px 12px;
}
50%,
65% {
background-position: 0px -34px, -12px -34px, -12px 12px, 34px -12px,
0px -10px, 12px 12px;
}
70%,
85% {
background-position: 0px -34px, -12px -34px, 0px 12px, 34px -12px, 0px -10px,
34px 12px;
}
90%,
100% {
background-position: 0px -34px, -12px -34px, 0px 0px, 34px -12px, 0px 0px,
34px 12px;
}
}
</style>