From e576ad111c1423259cdd1668af0e6c1630b66598 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Fri, 25 Sep 2020 17:36:04 -0700
Subject: [PATCH] feat: add a Spinner component

---
 src/components/Spinner.js | 49 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/components/Spinner.js

diff --git a/src/components/Spinner.js b/src/components/Spinner.js
new file mode 100644
index 000000000..e778cff31
--- /dev/null
+++ b/src/components/Spinner.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css, keyframes } from '@emotion/core';
+
+const spin = keyframes`
+  to {
+    transform: rotate(1turn);
+  }
+`;
+
+const Spinner = ({ inline }) => (
+  <div
+    aria-label="Loading"
+    aria-busy
+    css={css`
+      --spinner-size: 1rem;
+
+      display: inline-block;
+      position: relative;
+      height: ${inline ? 'var(--spinner-size)' : '100%'};
+      width: ${inline ? 'var(--spinner-size)' : '100%'};
+
+      &:after {
+        animation: ${spin} 0.5s linear infinite;
+        border-radius: 50%;
+        border-right: 1px solid transparent;
+        border-top: 1px solid;
+        content: '';
+        left: calc(50% + 1px);
+        margin-left: calc(var(--spinner-size) / 2 * -1);
+        margin-top: calc(var(--spinner-size) / 2 * -1);
+        position: absolute;
+        top: calc(50% + 1px);
+        width: var(--spinner-size);
+        height: var(--spinner-size);
+      }
+    `}
+  />
+);
+
+Spinner.propTypes = {
+  inline: PropTypes.bool,
+};
+
+Spinner.defaultProps = {
+  inline: false,
+};
+
+export default Spinner;