add blinking animation

2 files changed, 16 insertions, 5 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 {
diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.tsx b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
index b1ff88ba3..7da3f45be 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.tsx
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
@@ -66,7 +66,7 @@ export function ProgressBar(props: ProgressBarProps) {
       progressBarRef.current?.classList.toggle('progressbar-disabled', props.recording);
       
       if (props.recording)
-          setSegments(prevSegments => [...prevSegments, <div key='segment-expanding' id='segment-expanding' className='segment segment-expanding' style={{ width: 'min-content' }}>{props.videos.length + 1}</div>]);
+          setSegments(prevSegments => [...prevSegments, <div key='segment-expanding' id='segment-expanding' className='segment segment-expanding blink' style={{ width: 'min-content' }}>{props.videos.length + 1}</div>]);
   }, [props.recording])