Spinner

George’s loading animation is plain HTML including an SVG element for the CSS animation. Embed the HTML snippet where needed.

Loading demo…

Rules For Designers

Whenever there is sufficient space available (e.g full screen/card loading), use the spinner on top of explanation text.
Whenever there are several elements on the same page loaded separately (e.g. credit card overview), use the spinner stand-alone (without explanation text).
Whenever there is insufficient vertical space but need for explanation text, position the spinner to the left of the explanation 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.

Loading demo…

Rules For Developers

Avoid rendering a ConditionalSpinner with no children, use the Spinner component instead