feat: Add toggle direction button to kinetic loader

1 month ago · 4f2510cf9c
parent c92b0bc3a8
commit 4f2510cf9c
3 changed files with 42 additions and 4 deletions
--- a/kinetic-loader/index.html
+++ b/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>
--- a/kinetic-loader/script.js
+++ b/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');
+});
--- a/kinetic-loader/style.css
+++ b/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 --- */