mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
42 lines
No EOL
1 KiB
HTML
42 lines
No EOL
1 KiB
HTML
<div class="custom-loader"></div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by adilsarfraz02 - Tags: loader, spinner, smooth, custom, transition, effect loader, loading animation */
|
|
.custom-loader {
|
|
width: 40px;
|
|
height: 10px;
|
|
color: #f000b4;
|
|
background: radial-gradient(farthest-side, currentColor 90%, #0000) left /
|
|
10px 10px,
|
|
radial-gradient(farthest-side, currentColor 90%, #0000) center/10px 10px,
|
|
radial-gradient(farthest-side, currentColor 90%, #0000) right / 10px 10px,
|
|
linear-gradient(currentColor 0 0) center/100% 4px;
|
|
background-repeat: no-repeat;
|
|
position: relative;
|
|
animation: s6 2s infinite linear;
|
|
}
|
|
.custom-loader:before,
|
|
.custom-loader:after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: inherit;
|
|
animation: inherit;
|
|
--s: calc(50% - 5px);
|
|
animation-direction: reverse;
|
|
}
|
|
.custom-loader:after {
|
|
--s: calc(5px - 50%);
|
|
}
|
|
|
|
@keyframes s6 {
|
|
0% {
|
|
transform: translate(var(--s, 0)) rotate(0);
|
|
}
|
|
100% {
|
|
transform: translate(var(--s, 0)) rotate(1turn);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|