roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-04-25 11:59:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

smooth out spinner, add no-motion state

Browse source
This commit is contained in:
41666 2021-03-15 19:46:49 -04:00
parent 69a96fdd44
commit 7242bb3364
1 changed files with 22 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
packages/design-system/atoms/spinner/Spinner.tsx
View file

@ -1,4 +1,4 @@
import styled, { keyframes } from 'styled-components'; import styled, { css, keyframes } from 'styled-components';
import { palette } from '../colors'; import { palette } from '../colors';
type SpinnerProps = { type SpinnerProps = {
@ -10,20 +10,24 @@ type SpinnerProps = {
const spinnerKeyframes = keyframes` const spinnerKeyframes = keyframes`
0%, 100% { 0%, 100% {
border-width: 0; border-width: 0.5px;
border-right-width: 3px; border-right-width: 3px;
border-left-width: 0;
} }
25% { 25% {
border-width: 0; border-width: 0.5px;
border-top-width: 3px; border-top-width: 3px;
border-bottom-width: 0;
} }
50% { 50% {
border-width: 0; border-width: 0.5px;
border-left-width: 3px; border-left-width: 3px;
border-right-width: 0;
} }
75% { 75% {
border-width: 0; border-width: 0.5px;
border-bottom-width: 3px; border-bottom-width: 3px;
border-top-width: 0;
} }
`; `;
@ -34,13 +38,25 @@ const SpinnerStyled = styled.div<Required<SpinnerProps>>`
transform: rotateZ(0); transform: rotateZ(0);
} }
border: 0 solid ${(props) => props.color}; border: 0.5px solid ${(props) => props.color};
box-sizing: border-box;
width: ${(props) => props.size}px; width: ${(props) => props.size}px;
height: ${(props) => props.size}px; height: ${(props) => props.size}px;
border-radius: ${(props) => props.size * 0.7}px; border-radius: ${(props) => props.size * 0.7}px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
${(props) =>
props.reverse
? css`
border-right-width: 0;
border-left-width: 3px;
`
: css`
border-right-width: 3px;
border-left-width: 0;
`}
`; `;
export const Spinner = ( export const Spinner = (