Merge pull request #72 from precision-sustainable-ag/loading-spinner

Create a shared loading indicator component #24

src/Loadingspinner/index.js

@@ -0,0 +1,2 @@
+import { PSALoadingspinner } from "./loadingspinner"; 
+export default PSALoadingspinner;

src/Loadingspinner/loadingspinner.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styles from "./spinner.module.scss";
+
+export function PSALoadingspinner({ loaderStyle }) {
+
+  const defaultStyle = {
+    width: '50px',
+    height: '50px',
+    border: `8px solid #90EE90`,
+    borderTop: `8px solid green`,
+    borderLeft: `8px solid green`,
+    borderRight: `8px solid green`,
+    borderRadius: "50%",
+    animation: `${styles.spin} 2s linear infinite`,
+  };
+
+  return <div style={loaderStyle ? loaderStyle : defaultStyle}></div>;
+}
+
+PSALoadingspinner.propTypes = {
+
+   /**
+   * Styles for the loader
+   */
+   loaderStyle: PropTypes.object,
+
+};

src/Loadingspinner/loadingspinner.stories.jsx

@@ -0,0 +1,30 @@
+import { PSALoadingspinner } from "./loadingspinner";
+import styles from "./spinner.module.scss";
+
+const meta = {
+  title: "Feedback/Loadingspinner",
+  component: PSALoadingspinner,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+export const DefaultStyle = {};
+
+export const LoaderStyle = {
+  args: {
+    loaderStyle: {
+      width: "50px",
+      height: "50px",
+      border: `8px solid black`,
+      borderTop: `8px solid red`,
+      borderLeft: `8px solid red`,
+      borderRight: `8px solid red`,
+      borderRadius: "50%",
+      animation: `${styles.spin} 2s linear infinite`,
+    },
+  },
+};

src/Loadingspinner/spinner.module.scss

@@ -0,0 +1,8 @@
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/index.js

@@ -21,3 +21,4 @@ export { default as PSAModal } from "./Modal/index";
 export { default as PSACheckbox } from "./Checkbox/index";
 export { default as PSAProfile } from "./Profile/index";
 export { default as PSARadiobutton } from "./Radiobutton/index";
+export { default as PSALoadingspinner } from "./Loadingspinner/index";