diff --git a/.DS_Store b/.DS_Store
index 9057755..a5ac5d1 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/experimental/spinner.css b/experimental/spinner.css
index 114d389..21b8419 100644
--- a/experimental/spinner.css
+++ b/experimental/spinner.css
@@ -115,6 +115,18 @@
     }
 }
 
+@keyframes disappear {
+    0% {
+        opacity: 1;
+    }
+    80% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
 @keyframes draw {
     to {
         stroke-dashoffset: 0;
diff --git a/experimental/spinner.html b/experimental/spinner.html
index d28272e..d4df6b5 100644
--- a/experimental/spinner.html
+++ b/experimental/spinner.html
@@ -60,7 +60,8 @@
                 completionButton.addEventListener('click', function() {
                     var staticCircle = document.querySelector('.static circle');
                     staticCircle.style.strokeDasharray = "50, 0"
-                    staticCircle.style.animation = "uponCompletion 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1";
+                    staticCircle.style.animation = "uponCompletion 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1, disappear 1.5s cubic-bezier(0,.68,.29,1) 1";
+                    staticCircle.style.opacity = "0";
                 })
 
             };
@@ -83,10 +84,10 @@
             </svg>
         </div>
         <label for="dashlengthSlider">Dash Length:</label>
-        <input type="range" id="dashlength" value="1" max="250">
+        <input type="range" id="dashlength" value="50" max="250">
         <p id="dashlengthValue">Current dashlength value: </p>
         <label for="gaplengthSlider">GapLength:</label>
-        <input type="range" id="gaplength" value="1" max="250">
+        <input type="range" id="gaplength" value="250" max="250">
         <p id="gaplengthValue">Current gaplength value: </p>
         
         <button id="Complete">Complete</button>