add blinking animation

1 files changed, 15 insertions, 4 deletions

diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.scss b/src/client/views/nodes/RecordingBox/ProgressBar.scss
index 9697f8b17..7768a2f03 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.scss
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.scss
@@ -37,6 +37,21 @@
     cursor: not-allowed;
 }
 
+
+// citation: https://codepen.io/_Master_/pen/PRdjmQ
+@keyframes blinker {
+  from {opacity: 1.0;}
+  to {opacity: 0.0;}
+}
+.blink {
+	text-decoration: blink;
+	animation-name: blinker;
+	animation-duration: 0.6s;
+	animation-iteration-count:infinite;
+	animation-timing-function:ease-in-out;
+	animation-direction: alternate;
+}
+
 .segment {
   border: 3px solid black;
   background-color: red;
@@ -78,10 +93,6 @@ border-color: red;
     text-align: center;
     vertical-align: middle;
     user-select: none;
-    // /* Hide the text. */
-    // text-indent: 100%;
-    // white-space: nowrap;
-    // overflow: hidden;
 }
 
 .segment:first-child {