mirror of
https://github.com/kremalicious/blog.git
synced 2024-06-25 18:56:25 +02:00
39 lines
952 B
CSS
39 lines
952 B
CSS
.TokenLogo .loader {
|
|
--borderWidth: 5px;
|
|
--dashes: 10;
|
|
--gap: 5deg;
|
|
--color: var(--text-color);
|
|
|
|
width: 100px;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
padding: 1px;
|
|
background: conic-gradient(#0000, var(--color)) content-box;
|
|
|
|
--_m: repeating-conic-gradient(
|
|
#0000 0deg,
|
|
#000 1deg calc(360deg / var(--dashes) - var(--gap) - 1deg),
|
|
#0000 calc(360deg / var(--dashes) - var(--gap))
|
|
calc(360deg / var(--dashes))
|
|
),
|
|
radial-gradient(
|
|
farthest-side,
|
|
#0000 calc(98% - var(--borderWidth)),
|
|
#000 calc(100% - var(--borderWidth))
|
|
);
|
|
|
|
/* stylelint-disable-next-line property-no-vendor-prefix */
|
|
-webkit-mask: var(--_m);
|
|
mask: var(--_m);
|
|
/* stylelint-disable-next-line property-no-vendor-prefix */
|
|
-webkit-mask-composite: destination-in;
|
|
mask-composite: intersect;
|
|
animation: load 1s infinite steps(var(--dashes));
|
|
}
|
|
|
|
@keyframes load {
|
|
to {
|
|
transform: rotate(1turn);
|
|
}
|
|
}
|