Skip to content

Commit 208a54c

Browse files
committed
frontend: Loader: Add reduced motion preference support
This makes the loader spin a lot slower, with pauses.
1 parent f032503 commit 208a54c

File tree

1 file changed

+17
-0
lines changed

1 file changed

+17
-0
lines changed

frontend/src/components/common/Loader.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,23 @@ function injectLoaderStyle(theme: any) {
6969
border-bottom-color: transparent;
7070
animation: hl-custom-loader-spin 0.8s linear infinite;
7171
}
72+
@media (prefers-reduced-motion: reduce) {
73+
@keyframes hl-custom-loader-spin-reduced {
74+
0% { transform: rotate(0deg); }
75+
13% { transform: rotate(0deg); }
76+
23% { transform: rotate(90deg); }
77+
36% { transform: rotate(90deg); }
78+
46% { transform: rotate(180deg); }
79+
59% { transform: rotate(180deg); }
80+
69% { transform: rotate(270deg); }
81+
82% { transform: rotate(270deg); }
82+
92% { transform: rotate(360deg); }
83+
100% { transform: rotate(360deg); }
84+
}
85+
.hl-custom-loader-circle {
86+
animation: hl-custom-loader-spin-reduced 8s linear infinite;
87+
}
88+
}
7289
`;
7390
document.head.appendChild(style);
7491
}

0 commit comments

Comments
 (0)