Our spinner indicates that the content meant for a given container is taking extra time to appear. Regardless of how long or short the time to load may be, the spinner will always operate at one speed. It should never be used to indicate progress.
Choosing the right size depends on where the loading content lives.
Small: For the smallest parts of a UI, like a thumbnail or select.
We animate the spinner to tell the user things are happening and the content is on its way.
Start: A spinner starts spinning as soon as it appears. (Say that 10 times fast.)
The spinner should never be used to indicate progress. There’s nothing to track, we’re simply completing a quick call to our servers.
Don'tinclude any text regarding progress.
Doallow the spinner to speak for itself.
Always place spinners in the center of the content’s container. Don’t hide it in the corner like the loading isn’t important.
If the loading content lives outside of the viewport, center horizontally instead.
Don'tmisplace a spinner where it may not be seen.
Doput it front and center to clearly indicate something’s happening.
You get one spinner per page. Show too many at once and the user might get sick! If more than one piece of content is loading, stick to a large for the whole page.
Don'tgive each container its own spinner.
Doput one spinner in the center of the UI to indicate multiple pieces are loading.
|No guidelines exist for Windows (yet).|