From 7bf13e937721f3011afd12b1fbf2367358605bb9 Mon Sep 17 00:00:00 2001
From: Kevin Chen <kvn.c8888@gmail.com>
Date: Sun, 28 Jan 2024 12:52:36 -0500
Subject: [PATCH] reordered elements and polished ux

---
 experimental/spinner.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/experimental/spinner.html b/experimental/spinner.html
index 4a22e7c..072a231 100644
--- a/experimental/spinner.html
+++ b/experimental/spinner.html
@@ -72,23 +72,23 @@
         <!-- <svg class="spinner2" viewBox="0 0 50 50">
             <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="2"></circle>
         </svg> -->
-        <button>Play</button>
-        <label for="speed">Speed:</label>
-        <input type="text" id="speed" value="1.5">
         <div>
-            <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
+            <!-- <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
                 <polyline id="checkmark" points="10,20 20,30 40,10" stroke="black" stroke-width="4" fill="none" />
-            </svg>
+            </svg> -->
             <svg class = "static">
                 <circle cx="55" cy="55" r="50"/>
             </svg>
         </div>
         <label for="dashlengthSlider">Dash Length:</label>
         <input type="range" id="dashlength" value="50" max="250">
-        <p id="dashlengthValue">Current dashlength value: </p>
+        <p id="dashlengthValue">Current dashlength value: 50</p>
         <label for="gaplengthSlider">GapLength:</label>
         <input type="range" id="gaplength" value="250" max="300">
-        <p id="gaplengthValue">Current gaplength value: </p>
+        <p id="gaplengthValue">Current gaplength value: 250</p>
+        <label for="speed">Speed:</label>
+        <input type="text" id="speed" value="1.5">
+        <button>Play</button>
         
         <!-- <button id="Complete">Complete</button> -->