feat: Add toggle direction button to kinetic loader

kinetic-loader/index.html

@@ -8,7 +8,9 @@
   </head>
   <body>
     <div class="kinetic"></div>
-    
+
+    <button id="toggle-btn">Toggle Direction</button>
+
     <script src="script.js"></script>
   </body>
-</html>
+</html>

kinetic-loader/script.js

@@ -0,0 +1,7 @@
+const kineticLoader = document.querySelector('.kinetic');
+const toggleBtn = document.getElementById('toggle-btn');
+
+toggleBtn.addEventListener('click', () => {
+    // Adds the 'reverse' class if it's not there, removes it if it is
+    kineticLoader.classList.toggle('reverse');
+});

kinetic-loader/style.css

@@ -28,14 +28,24 @@ body {
   height: 0;
   border: 50px solid transparent;
   border-bottom-color: #fff;
-  animation: rotateA 2s linear infinite 0.5s;
+  /* Ensure animation direction is normal by default */
+  animation: rotateA 2s linear infinite 0.5s normal; 
 }
 
 .kinetic::before {
   transform: rotate(90deg);
-  animation: rotateB 2s linear infinite;
+  /* Ensure animation direction is normal by default */
+  animation: rotateB 2s linear infinite normal; 
 }
 
+/* --- ADDED: Reverse animation class --- */
+.kinetic.reverse::before,
+.kinetic.reverse::after {
+  animation-direction: reverse;
+}
+/* --- End Added --- */
+
+
 @keyframes rotateA {
   0%,
   25% {
@@ -67,3 +77,22 @@ body {
     transform: rotate(450deg);
   }
 }
+
+/* --- ADDED: Button styles --- */
+button {
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 10px 20px;
+  background-color: #fff;
+  border: 1px solid #333;
+  border-radius: 5px;
+  cursor: pointer;
+  font-family: inherit; /* Use same font as body */
+}
+
+button:hover {
+    background-color: #eee; /* Slight hover effect */
+}
+/* --- End Added --- */