mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
60 lines
1.5 KiB
HTML
60 lines
1.5 KiB
HTML
<div class="loader">
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
|
<path fill="#470BA9" d="M158 77c6 23-8 48-28 63-21 16-49 21-68 8-19-12-28-43-20-68s33-45 58-45c26 0 52 20 58 42z"></path>
|
|
</svg></span>
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
|
<path fill="#470BA9" d="M158 77c6 23-8 48-28 63-21 16-49 21-68 8-19-12-28-43-20-68s33-45 58-45c26 0 52 20 58 42z"></path>
|
|
</svg></span>
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
|
<path fill="#470BA9" d="M158 77c6 23-8 48-28 63-21 16-49 21-68 8-19-12-28-43-20-68s33-45 58-45c26 0 52 20 58 42z"></path>
|
|
</svg></span>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by SilasRodrigues19 - Tags: loader */
|
|
.loader {
|
|
z-index: 20;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: visible;
|
|
}
|
|
|
|
.loader span {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: -5px;
|
|
animation: dots_411 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.loader span:nth-child(1) {
|
|
-webkit-animation-delay: -.40s;
|
|
animation-delay: -.40s;
|
|
}
|
|
|
|
.loader span:nth-child(2) {
|
|
-webkit-animation-delay: -.25s;
|
|
animation-delay: -.25s;
|
|
}
|
|
|
|
.loader span:nth-child(3) {
|
|
-webkit-animation-delay: -.10s;
|
|
animation-delay: -.10s;
|
|
}
|
|
|
|
@keyframes dots_411 {
|
|
5% {
|
|
opacity: 0;
|
|
}
|
|
|
|
0%, 80%, 100% {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: scale(.8);
|
|
transform: scale(.8);
|
|
}
|
|
}
|
|
|
|
</style>
|