1 files changed, 51 insertions, 0 deletions
diff --git a/FrontEnd/src/views/timeline-common/TimelineLine.tsx b/FrontEnd/src/views/timeline-common/TimelineLine.tsx
new file mode 100644
index 00000000..0a828b32
--- /dev/null
+++ b/FrontEnd/src/views/timeline-common/TimelineLine.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import classnames from "classnames";
+
+export interface TimelineLineProps {
+  current?: boolean;
+  startSegmentLength?: string | number;
+  center: "node" | "loading" | "none";
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const TimelineLine: React.FC<TimelineLineProps> = ({
+  startSegmentLength,
+  center,
+  current,
+  className,
+  style,
+}) => {
+  return (
+    <div
+      className={classnames(
+        "timeline-line",
+        current && "current",
+        center === "loading" && "loading",
+        className
+      )}
+      style={style}
+    >
+      <div className="segment start" style={{ height: startSegmentLength }} />
+      {center !== "none" ? (
+        <div className="node-container">
+          <div className="node"></div>
+          {center === "loading" ? (
+            <svg className="node-loading-edge" viewBox="0 0 100 100">
+              <path
+                d="M 50,10 A 40 40 45 0 1 78.28,21.72"
+                stroke="currentcolor"
+                strokeLinecap="square"
+                strokeWidth="8"
+              />
+            </svg>
+          ) : null}
+        </div>
+      ) : null}
+      {center !== "loading" ? <div className="segment end"></div> : null}
+      {current && <div className="segment current-end" />}
+    </div>
+  );
+};
+
+export default TimelineLine;