mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
33 lines
No EOL
719 B
HTML
33 lines
No EOL
719 B
HTML
<div class="loader"></div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by choudhary-usman - Tags: simple, material design, icon, animation, loader, animated */
|
|
.loader {
|
|
--s: 15px;
|
|
width: calc(var(--s) * 2.33);
|
|
aspect-ratio: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.loader::before,
|
|
.loader::after {
|
|
content: "";
|
|
width: var(--s);
|
|
--_g: no-repeat radial-gradient(farthest-side, #000 94%, #0000);
|
|
background: var(--_g) top, var(--_g) bottom;
|
|
background-size: 100% var(--s);
|
|
transform-origin: 50% calc(100% - var(--s) / 2);
|
|
animation: l30 1s infinite;
|
|
}
|
|
.loader::after {
|
|
transform-origin: 50% calc(var(--s) / 2);
|
|
}
|
|
@keyframes l30 {
|
|
70%,
|
|
100% {
|
|
transform: rotate(-270deg);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|