Add animation for Server OK

jcreedcmu · Mar 2, 2024 · 894f474 · 894f474
1 parent 809efd5
commit 894f474
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 7 deletions.
diff --git a/assets/bundle.js b/assets/bundle.js
diff --git a/assets/bundle.js.map b/assets/bundle.js.map
diff --git a/css/style.css b/css/style.css
@@ -180,6 +180,23 @@ label {
   line-height: 2rem;
 }
 
+.server-status::after {
+  content: '';
+  display: block;
+  position: absolute;
+  background: rgba(255, 255, 255, 0.35);
+  width: 60px;
+  height: 100%;
+  top: 0;
+  transform: translateX(-100px) skewX(-15deg);
+  pointer-events: none;
+}
+
+.server-status-flash::after {
+   transform: translateX(200px) skewX(-15deg);
+   transition: 1s;
+}
+
 .server-status-ok {
   color: white;
   background-image: linear-gradient(to bottom, #7d9d77, #294523);

diff --git a/index.html b/index.html
@@ -23,7 +23,7 @@ <h1>Twelf Sandbox</h1>
           <button id="share-button">Share</button>
           <span id="loading-indicator"><span class="loader"></span><em>Loading Twelf Wasm...</em></span>
           <div class="spacer"></div>
-          <div id="server-status"></div>
+          <div id="server-status" class="server-status"></div>
         </div>
         <div class="wrap" id="twelf-response-wrap">
           <textarea readonly id="twelf-response" spellcheck="false"></textarea>

diff --git a/src/index.ts b/src/index.ts
@@ -62,12 +62,15 @@ function showStatus(status: Status) {
 
   switch (status) {
     case Status.OK: {
-      serverStatus.className = 'server-status-ok';
+      serverStatus.className = 'server-status server-status-ok';
+      setTimeout(() => {
+        serverStatus.classList.add('server-status-flash');
+      }, 0);
       serverStatus.innerText = 'Server OK';
     }
       break;
     case Status.ABORT: {
-      serverStatus.className = 'server-status-abort';
+      serverStatus.className = 'server-status server-status-abort';
       serverStatus.innerText = 'Server ABORT';
     } break;
   }