feat: add a circular loader instead of jump

HugoClery · Jun 5, 2024 · d787932 · d787932
1 parent 403ab3e
commit d787932
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 55 deletions.
diff --git a/index.css b/index.css
diff --git a/index.css.map b/index.css.map
diff --git a/sass/abstracts/_loader.scss b/sass/abstracts/_loader.scss
@@ -15,25 +15,33 @@
 }
 
 .loader__itemContainer {
+  position: relative;
+  width: 6rem;
+  height: 6rem;
   display: flex;
-  width: 5rem;
-  justify-content: space-between;
+  align-items: center;
+  justify-content: center;
 }
+
 .loader__item {
-  height: 1rem;
-  width: 1rem;
-  border-radius: 1rem;
-  animation: jump 1s;
-  animation-iteration-count: 1;
+  position: absolute;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  animation: rotate 1.5s linear infinite;
+}
+
+.loader__item--1 {
+  background-color: $color-primary;
+  animation-delay: 0s;
 }
+
 .loader__item--2 {
   background-color: $color-secondary;
-  animation-delay: 0.25s;
+  animation-delay: 0.5s;
 }
+
 .loader__item--3 {
   background-color: $color-tertiary;
-  animation-delay: 0.5s;
-}
-.loader__item--1 {
-  background-color: $color-primary;
+  animation-delay: 1s;
 }
diff --git a/sass/base/_animations.scss b/sass/base/_animations.scss
@@ -1,3 +1,12 @@
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg) translateX(2.5rem) rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg) translateX(2.5rem) rotate(-360deg);
+  }
+}
+
 @keyframes loader {
   100% {
     opacity: 0;
@@ -14,21 +23,6 @@
   }
 }
 
-@keyframes jump {
-  0% {
-    transform: translateY(0);
-  }
-  25% {
-    transform: translateY(0.5rem);
-  }
-  75% {
-    transform: translateY(-0.5rem);
-  }
-  100% {
-    transform: translateY(0);
-  }
-}
-
 @keyframes menu-listes {
   0% {
     opacity: 0;