Spinners

Guidance

Spinners are animated icons that let users know when a system process is happening. Spinners appear when a process begins and disappear when the process is complete.

Do

• Only show one spinner at a time.
• Only show a spinner if the expected wait time is two seconds or more.
• If only a portion of a page is loading new content, place the spinner in that part of the page.
• When placing a spinner inside a button, the spinner should only be visible after the user actions the button.

For accessibility purposes, the spinner includes role="status" and a nested .sr-only span.

Spinner

<div class="gnb-spinner" role="status">
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
		y="0px" viewBox="0 0 512 512" xml:space="preserve">
		<path style="fill: var(--gnb-blue);" d="M222.7,32.1c5,16.9-4.6,34.8-21.5,39.8C121.8,95.6,64,169.1,64,256c0,106,86,192,192,192s192-86,192-192
c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6,39.8-21.5C434.9,42.1,512,140,512,256
c0,141.4-114.6,256-256,256S0,397.4,0,256C0,140,77.1,42.1,182.9,10.6C199.8,5.6,217.7,15.2,222.7,32.1z" />
	</svg>
	<span class="sr-only">Loading...</span>
</div>

Spinner sizing

There are three size options available, in addition to the default spinner size. Use small spinners within components or page sections, and larger spinners when loading entire pages or applications.

Small

<div class="gnb-spinner-sm" role="status">
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
		y="0px" viewBox="0 0 512 512" xml:space="preserve">
		<path style="fill: var(--gnb-blue);" d="M222.7,32.1c5,16.9-4.6,34.8-21.5,39.8C121.8,95.6,64,169.1,64,256c0,106,86,192,192,192s192-86,192-192
c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6,39.8-21.5C434.9,42.1,512,140,512,256
c0,141.4-114.6,256-256,256S0,397.4,0,256C0,140,77.1,42.1,182.9,10.6C199.8,5.6,217.7,15.2,222.7,32.1z" />
	</svg>
	<span class="sr-only">Loading...</span>
</div>

Medium

<div class="gnb-spinner-md" role="status">
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
		y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
		<path style="fill: var(--gnb-blue);" d="M222.7,32.1c5,16.9-4.6,34.8-21.5,39.8C121.8,95.6,64,169.1,64,256c0,106,86,192,192,192s192-86,192-192
c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6,39.8-21.5C434.9,42.1,512,140,512,256
c0,141.4-114.6,256-256,256S0,397.4,0,256C0,140,77.1,42.1,182.9,10.6C199.8,5.6,217.7,15.2,222.7,32.1z" />
	</svg>
	<span class="sr-only">Loading...</span>
</div>

Large

<div class="gnb-spinner-lg" role="status">
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
		y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
		<path style="fill: var(--gnb-blue);" d="M222.7,32.1c5,16.9-4.6,34.8-21.5,39.8C121.8,95.6,64,169.1,64,256c0,106,86,192,192,192s192-86,192-192
c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6,39.8-21.5C434.9,42.1,512,140,512,256
c0,141.4-114.6,256-256,256S0,397.4,0,256C0,140,77.1,42.1,182.9,10.6C199.8,5.6,217.7,15.2,222.7,32.1z" />
	</svg>
	<span class="sr-only">Loading...</span>
</div>

Spinner in a button

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

Loading Loading...

<button class="gnb-button">
	Loading
	<svg class="gnb-spinner-sm" version="1.1" xmlns="http://www.w3.org/2000/svg"
		xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
		xml:space="preserve">
		<path style="fill: var(--gnb-white);" d="M222.7,32.1c5,16.9-4.6,34.8-21.5,39.8C121.8,95.6,64,169.1,64,256c0,106,86,192,192,192s192-86,192-192
c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6,39.8-21.5C434.9,42.1,512,140,512,256
c0,141.4-114.6,256-256,256S0,397.4,0,256C0,140,77.1,42.1,182.9,10.6C199.8,5.6,217.7,15.2,222.7,32.1z" />
	</svg>
	<span class="sr-only">Loading...</span>
	</span>
</button>