Spinner
Open in Storybook Open in Figma
George’s loading animation is plain HTML including an SVG element for the CSS animation. Embed the HTML snippet where needed.
Rules For Designers
- Whenever there is sufficient space available (e.g full screen/card loading), use the spinner on top of explanatory text.
- Whenever there are several elements on the same page loaded separately (e.g. credit card overview), use the spinner stand-alone (without explanatory text).
- Whenever there is insufficient vertical space but need for explanatory text, position the spinner to the left of the explanatory text – should be treated rather as an exception.
ConditionalSpinner REACT-ONLY
ConditionalSpinner functions as a shortcut to displaying either a spinner or content via a single boolean prop.
Rules For Developers
- Avoid rendering a ConditionalSpinner with no
children, use the Spinner component instead