Respect prefers-reduced-motion

2021-06-03 17:57:55 +10:00 · 2021-06-03 17:57:55 +10:00 · 7c8ede73cd
commit 7c8ede73cd
parent 018b045a1e
7 changed files with 62 additions and 5 deletions
--- a/crabfit-frontend/src/components/Loading/loadingStyle.ts
+++ b/crabfit-frontend/src/components/Loading/loadingStyle.ts
@ -23,4 +23,13 @@ export const Loader = styled.div`
  border-left-color: transparent;
  border-radius: 100px;
  animation: load .5s linear infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    border: 0;
+
+    &::before {
+      content: 'loading...';
+    }
+  }
 `;