diff --git a/.changeset/stale-carrots-argue.md b/.changeset/stale-carrots-argue.md new file mode 100644 index 0000000000..b9f4502eaa --- /dev/null +++ b/.changeset/stale-carrots-argue.md @@ -0,0 +1,5 @@ +--- +'@skillsoft/gamut': patch +--- + +Updates Spinner to work in Safari diff --git a/packages/gamut/src/Loading/Spinner.tsx b/packages/gamut/src/Loading/Spinner.tsx index 1f6f1924ac..0c89a2c6ec 100644 --- a/packages/gamut/src/Loading/Spinner.tsx +++ b/packages/gamut/src/Loading/Spinner.tsx @@ -1,9 +1,29 @@ +import { keyframes } from '@emotion/react'; +import styled from '@emotion/styled'; +import { css } from '@skillsoft/gamut-styles'; import { FunctionComponent, SVGProps } from 'react'; export type SpinnerProps = SVGProps & { size?: number | string; }; +// Using keyframes since the element doesn't animate in Safari +const rotate = keyframes({ + from: { transform: 'rotate(0deg)' }, + to: { transform: 'rotate(360deg)' }, +}); + +const SpinnerRing = styled.g( + css({ + animation: `${rotate} 1s linear infinite`, + transformBox: 'view-box', + transformOrigin: 'center', + '@media (prefers-reduced-motion: reduce)': { + animationDuration: '3s', + }, + }) +); + export const Spinner: FunctionComponent = ({ size = 24, ...props @@ -11,140 +31,133 @@ export const Spinner: FunctionComponent = ({ return ( Spinner - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); };