mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
44 lines
1.6 KiB
HTML
44 lines
1.6 KiB
HTML
|
|
<div class="spinner"></div>
|
|
<style>
|
|
/* From Uiverse.io by AqFox - Tags: loader */
|
|
.spinner {
|
|
--R: 28px;
|
|
--g1: #004dff 96%, #0000;
|
|
--g2: #d6d6fc 96%, #0000;
|
|
width: calc(2*var(--R));
|
|
height: calc(2*var(--R));
|
|
border-radius: 50%;
|
|
display: grid;
|
|
-webkit-mask: linear-gradient(#000 0 0);
|
|
animation: spinner-maxc6n 2s infinite linear;
|
|
}
|
|
|
|
.spinner::before,
|
|
.spinner::after {
|
|
content: "";
|
|
grid-area: 1/1;
|
|
width: 50%;
|
|
background: radial-gradient(farthest-side,var(--g1)) calc(var(--R) + 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R) - var(--R)),
|
|
radial-gradient(farthest-side,var(--g1)) calc(var(--R) + 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R) - var(--R)),
|
|
radial-gradient(farthest-side,var(--g2)) calc(var(--R) + 0.5*var(--R) - var(--R)) calc(var(--R) - 0.866*var(--R) - var(--R)),
|
|
radial-gradient(farthest-side,var(--g1)) 0 calc(-1*var(--R)),
|
|
radial-gradient(farthest-side,var(--g2)) calc(var(--R) - 0.5*var(--R) - var(--R)) calc(var(--R) - 0.866*var(--R) - var(--R)),
|
|
radial-gradient(farthest-side,var(--g1)) calc(var(--R) - 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R) - var(--R)),
|
|
radial-gradient(farthest-side,var(--g2)) calc(-1*var(--R)) 0,
|
|
radial-gradient(farthest-side,var(--g1)) calc(var(--R) - 0.866*var(--R) - var(--R)) calc(var(--R) + 0.5*var(--R) - var(--R));
|
|
background-size: calc(2*var(--R)) calc(2*var(--R));
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.spinner::after {
|
|
transform: rotate(180deg);
|
|
transform-origin: right;
|
|
}
|
|
|
|
@keyframes spinner-maxc6n {
|
|
100% {
|
|
transform: rotate(-1turn);
|
|
}
|
|
}
|
|
</style>
|