diff --git a/index.html b/index.html
index e7b28ef..04528cf 100644
--- a/index.html
+++ b/index.html
@@ -36,61 +36,31 @@
.loader {
position: relative;
- width: 50px;
- aspect-ratio: 1.154;
- background: conic-gradient(
- from 120deg at 50% 64%,
- #0000,
- #25b09b 1deg 120deg,
- #0000 121deg
- );
- animation: l27-0 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
+ width: 40px;
+ aspect-ratio: 0.577;
+ overflow: hidden;
+ clip-path: polygon(0 0, 100% 100%, 0 100%, 100% 0);
+ animation: l19 2s infinite linear;
}
- .loader::before,
- .loader::after {
+ .loader::before {
position: absolute;
- inset: 0;
+ inset: -150%;
content: "";
- background: inherit;
- transform-origin: 50% 66%;
- animation: l27-1 1.5s infinite;
+ background: repeating-conic-gradient(
+ from 30deg,
+ #ffabab 0 60deg,
+ #abe4ff 0 120deg,
+ #ff7373 0 180deg
+ );
+ animation: inherit;
+ animation-direction: reverse;
}
- .loader::after {
- --s: -1;
- }
-
- @keyframes l27-0 {
- 0%,
- 30% {
- transform: rotate(0);
- }
-
- 70% {
- transform: rotate(120deg);
- }
-
- 70.01%,
+ @keyframes l19 {
100% {
transform: rotate(360deg);
}
}
-
- @keyframes l27-1 {
- 0% {
- transform: rotate(calc(var(--s, 1) * 120deg)) translate(0);
- }
-
- 30%,
- 70% {
- transform: rotate(calc(var(--s, 1) * 120deg))
- translate(calc(var(--s, 1) * -5px), 10px);
- }
-
- 100% {
- transform: rotate(calc(var(--s, 1) * 120deg)) translate(0);
- }
- }