mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
77 lines
No EOL
1.9 KiB
HTML
77 lines
No EOL
1.9 KiB
HTML
<div class="loader">
|
|
<svg
|
|
viewBox="0 0 256 256"
|
|
class="star star1"
|
|
height="32"
|
|
width="32"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
|
|
></path>
|
|
</svg>
|
|
<svg
|
|
viewBox="0 0 256 256"
|
|
class="star star2"
|
|
height="32"
|
|
width="32"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
|
|
></path>
|
|
</svg>
|
|
<svg
|
|
viewBox="0 0 256 256"
|
|
class="star star3"
|
|
height="32"
|
|
width="32"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by LightAndy1 - Tags: simple, icon, animation, yellow, loader, smooth, dark, stars */
|
|
.loader {
|
|
user-select: none;
|
|
}
|
|
|
|
.star {
|
|
opacity: 0;
|
|
fill: #f8de7e;
|
|
animation: loader 2s infinite alternate;
|
|
}
|
|
|
|
.star2 {
|
|
height: 20px;
|
|
margin-left: -10px;
|
|
animation-delay: 0.25s;
|
|
}
|
|
|
|
.star3 {
|
|
height: 16px;
|
|
margin-left: -15px;
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
@keyframes loader {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(0) translateX(50px) rotate (0deg);
|
|
}
|
|
10% {
|
|
opacity: 0;
|
|
transform: translateY(0) translateX(50px) rotate(0deg);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(-20px) translateX(0) rotate(360deg);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|