first commit

src/pageElements/LoadingSpinner.js

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import RingLoader from "react-spinners/RingLoader";
+import "../styles/spinner.scss";
+
+const LoadingSpinner = (props) => {
+  const { message } = props;
+  let [loading, setLoading] = useState(true);
+  const color = "#31e0f7";
+
+  const override = {
+    display: "flex",
+    flexDirection: "column",
+    margin: "12px auto",
+    borderColor: "#a4ebf4",
+  };
+
+  return (
+    <div className="spinner-outer-wrapper">
+      <div className="spinner-container">
+        <div className="loading-text-box">
+          <p className="loading-graph">{message}</p>
+        </div>
+        <RingLoader
+          color={color}
+          loading={loading}
+          cssOverride={override}
+          size={150}
+          aria-label="Loading Spinner"
+          data-testid="loader"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default LoadingSpinner;