Example

Spinner

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px" viewBox="0 0 50 50" class="ys-spinner">
    <circle class="ys-spinner__circle" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</svg>

HTML Guidelines

UX and Design Guidelines

Try to always keep spinners in page and not in overlays. If a spinner is triggered by a button, place the spinner in the button, and disable the button while the spinner is visible.

If only a portion of a page is displaying new content or being updated, place the spinner in that part of the page.

If you are unsure where to place the spinner, place it where you want the user’s attention to be when loading is finished. Only show a spinner if the expected wait time is more than a second.