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;