init

platform/ui/src/components/ProgressLoadingBar/ProgressLoadingBar.css

@@ -0,0 +1,26 @@
+.loading {
+  background-color: #091731;
+  height: 8px;
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
+.infinite-loading-bar {
+  animation: side2side 2s ease-in-out infinite;
+  height: 100%;
+  position: absolute;
+  border-radius: 4px;
+  width: 50%;
+}
+
+@keyframes side2side {
+  0%,
+  100% {
+    transform: translateX(-50%);
+  }
+  50% {
+    transform: translateX(150%);
+  }
+}

platform/ui/src/components/ProgressLoadingBar/ProgressLoadingBar.tsx

@@ -0,0 +1,32 @@
+import React, { ReactElement } from 'react';
+
+import './ProgressLoadingBar.css';
+
+export type ProgressLoadingBarProps = {
+  progress?: number;
+};
+/**
+ * A React component that renders a loading progress bar.
+ * If progress is not provided, it will render an infinite loading bar
+ * If progress is provided, it will render a progress bar
+ * The progress text can be optionally displayed to the left of the bar.
+ */
+function ProgressLoadingBar({ progress }: ProgressLoadingBarProps): ReactElement {
+  return (
+    <div className="loading">
+      {progress === undefined || progress === null ? (
+        <div className="infinite-loading-bar bg-primary-light"></div>
+      ) : (
+        <div
+          className="bg-primary-light"
+          style={{
+            width: `${progress}%`,
+            height: '8px',
+          }}
+        ></div>
+      )}
+    </div>
+  );
+}
+
+export default ProgressLoadingBar;

platform/ui/src/components/ProgressLoadingBar/index.js

@@ -0,0 +1,2 @@
+import ProgressLoadingBar from './ProgressLoadingBar';
+export default ProgressLoadingBar;