added sliders for dash and gap length

kvn8888 · Jan 28, 2024 · bce9313 · bce9313
1 parent 381e8de
commit bce9313
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 23 deletions.
diff --git a/experimental/spinner.css b/experimental/spinner.css
@@ -25,9 +25,31 @@
     animation: dash 1.5s ease-in-out 1;
 }
 
+.static {
+    z-index: 1;
+    position: absolute;
+    top: 20%;
+    left: 20%;
+    margin: -15px 0 0 -15px;
+    width: 300px;
+    height: 300px;
+}
+
+.static circle {
+    fill: transparent;
+    cx: 150;
+    cy: 150;
+    r: 50;
+
+    stroke-dasharray: 17,20;
+    stroke: rgb(0, 0, 0);
+    stroke-width: 4;
+    stroke-linecap: round;
+}
+
 /* Define the gap variable */
 :root {
-    --gap: 20;
+    --gap: 100;
 }
 
 @keyframes rotate {
@@ -41,12 +63,11 @@
             stroke-dashoffset: 0;
         }
         50% {
-            stroke-dasharray: 150, var(--gap);
+            stroke-dasharray: 50, var(--gap);
             /* stroke-dashoffset: -35; */
         }
         100% {
             stroke-dasharray: 180, var(--gap);
             /* stroke-dashoffset: -124; */
         }
-        /* The gap has no meaningful effect on the visualization */
 }
diff --git a/experimental/spinner.html b/experimental/spinner.html
@@ -10,23 +10,6 @@
         <link rel="icon" href="favicon.ico">
         <link rel="stylesheet" href="spinner.css">
         <script>
-            // function restartAnimation(elementClass, toggleClass) {
-            //     var element = document.querySelector(elementClass);
-            //     element.classList.remove(toggleClass);
-            //     void element.offsetHeight;
-            //     element.classList.add(toggleClass);
-            // }
-
-            // function restartAnimation(elementClass, toggleClass) {
-            //     var element = document.querySelector(elementClass);
-            //     var speed = document.querySelector('#speed').value;
-            //     var animationString = 'animate ' + speed + 's linear infinite';
-
-            //     var newElement = element.cloneNode(true); // Clone the element
-            //     element.parentNode.replaceChild(newElement, element); // Replace the old element with the clone
-            //     // Optionally, re-add the class if it's not part of the initial HTML structure
-            //     newElement.classList.add(toggleClass);
-            // }
             function restartAnimation(elementClass, toggleClass) {
                 var element = document.querySelector(elementClass);
                 var speed = document.querySelector('#speed').value; // Get the speed from the input
@@ -38,14 +21,37 @@
                 newElement.classList.add(toggleClass); // Add the toggleClass if necessary
             }
 
-
-
             window.onload = function() {
                 var button = document.querySelector('button');
+                var dashlengthSlider = document.querySelector('#dashlength');
+                var gaplengthSlider = document.querySelector('#gaplength');
 
                 button.addEventListener('click', function() {
                     restartAnimation('.spinner2 .path', 'animate');
                 });
+
+                dashlengthSlider.addEventListener('input', function() {
+                    var dashlength = document.querySelector('#dashlength').value;
+                    var staticCircle = document.querySelector('.static circle');
+                    var staticCircleGap = document.querySelector('#gaplength').value;
+
+                    staticCircle.style.strokeDasharray = dashlength + ' ' + staticCircleGap;
+
+                    var dashlengthValue = document.querySelector('#dashlengthValue');
+                    dashlengthValue.textContent = 'Current dashlength value: ' + dashlength;
+                })
+
+                gaplengthSlider.addEventListener('input', function() {
+                    var gaplength = document.querySelector('#gaplength').value;
+                    var staticCircle = document.querySelector('.static circle');
+                    var staticCircleDash = document.querySelector('#dashlength').value;
+
+                    staticCircle.style.strokeDasharray = staticCircleDash + ' ' + gaplength;
+
+                    var gaplengthValue = document.querySelector('#gaplengthValue');
+                    gaplengthValue.textContent = 'Current gaplength value: ' + gaplength;
+                })
+
             };
         </script>
     </head>
@@ -56,6 +62,15 @@
         </svg>
         <button>Play</button>
         <label for="speed">Speed:</label>
-        <input tyoe="text" id="speed" value="1.5">
+        <input type="text" id="speed" value="1.5">
+        <svg class = "static">
+            <circle/>
+        </svg>
+        <label for="dashlengthSlider">Dash Length:</label>
+        <input type="range" id="dashlength" value="1">
+        <p id="dashlengthValue">Current dashlength value: </p>
+        <label for="gaplengthSlider">GapLength:</label>
+        <input type="range" id="gaplength" value="1">
+        <p id="gaplengthValue">Current gaplength value: </p>
     </body>
 </html>