diff --git a/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.css b/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.css
index f961c30..e046cee 100644
--- a/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.css
+++ b/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.css
@@ -20,6 +20,9 @@
         cursor: pointer;
         margin: 10px; /* Espacement entre les boutons */
         font-size: 8vh;
+
+        position: relative;
+        overflow: hidden;    
     }
 
     .timer {
@@ -57,6 +60,9 @@
         cursor: pointer;
         margin: 10px; /* Espacement entre les boutons */
         font-size: 8vw;
+
+        position: relative;
+        overflow: hidden;    
     }
 
     .timer {
@@ -77,6 +83,19 @@
     background-color: #3949ab;
 }
 
+.loading::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #3949ab; /* Couleur de la barre de chargement */
+    animation: loading 5.1s linear forwards; /* Animation de la barre de chargement */
+    z-index: -1; /* Assurez-vous que la barre de chargement est en arrière-plan */
+}
+
+
 .anim {
     animation: anim 0.8s;
   }
@@ -93,4 +112,11 @@
     }
 }
 
-
+@keyframes loading {
+    0% {
+        height: 0; /* Commencez avec une hauteur de 0 */
+    }
+    100% {
+        height: 100%; /* Montez jusqu'à 100% de la hauteur */
+    }
+}
diff --git a/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.html b/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.html
index d35b753..77ddcb3 100644
--- a/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.html
+++ b/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.html
@@ -5,7 +5,9 @@
 </div>
 -->
 <div class="button-container">
+  <!-- 
 <div *ngIf="currentCooldown < cooldown" class="timer">{{(5 - currentCooldown).toFixed(1)}}</div>
+-->
 <div class="button" id="0" (click)="click('0')">💡</div>
 <div class="button" id="1" (click)="click('1')">🫀</div>
 <div class="button" id="2" (click)="click('2')">👻</div>
diff --git a/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.ts b/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.ts
index 6acd54f..91b14fd 100644
--- a/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.ts
+++ b/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.ts
@@ -50,14 +50,18 @@ export class AsymetricUnityTemplateComponent implements OnInit {
   animation(value: string) {
     const animated = document.getElementById(value);
 
-    animated!.addEventListener("animationend", () => {
-      animated?.classList.remove('anim');
+    animated!.addEventListener("animationend", (x) => {
+      if(x.animationName == "anim") {
+        animated?.classList.remove('anim');
+      }
+      else {
+        animated?.classList.remove('loading');
+      }
     });
   }
 
   click(value: string) {
     if(this.currentCooldown == this.cooldown) {
-      console.log("TEST")
       this.currentCooldown = 0;
       document.getElementById("0")!.style.backgroundColor = "grey"
       document.getElementById("1")!.style.backgroundColor = "grey"
@@ -70,6 +74,11 @@ export class AsymetricUnityTemplateComponent implements OnInit {
       const animated = document.getElementById(value);
       animated?.classList.add('anim');
       this.urlService.publish(this.variable, value).subscribe((x)=>console.log)  
+
+      document.getElementById("0")!.classList.add('loading')
+      document.getElementById("1")!.classList.add('loading')
+      document.getElementById("2")!.classList.add('loading')
+      document.getElementById("3")!.classList.add('loading')      
     }
   }
 }