Loading Spinner

Last updated: 9/21/21

Use a Loading Spinner to indicate that a piece of UI is loading on the page.

Base

Use the base class pier-loading-spinner on the SVG code below for the default or GumGum branded Loading Spinnger.

HTML markup

<svg
    class="pier-loading-spinner"
    preserveAspectRatio="xMaxYMid meet"
    viewBox="0 0 100 100"
    height="50px"
    width="50px"
>
    <defs>
        <linearGradient id="gradient1" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="#08D18B"></stop>
        </linearGradient>
        <linearGradient id="gradient2" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="rgba(0,255,255,0)"></stop>
        </linearGradient>
        <mask id="clip-rectangle">
            <circle cx="50" cy="50" r="50" fill="#fff"></circle>
            <circle cx="50" cy="50" r="43"></circle>
        </mask>
    </defs>
    <path
        fill="url(#gradient1)"
        d="M0 0H100V50H0z"
        mask="url(#clip-rectangle)"
    ></path>
    <path
        fill="url(#gradient2)"
        d="M0 50H100V100H0z"
        mask="url(#clip-rectangle)"
    ></path></svg
><svg
    class="-m-l-4"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 50 125 1"
    height="50"
    width="50"
>
    <defs>
        <linearGradient
            id="linear-gradient"
            x1="24.92"
            y1="77.18"
            x2="134.22"
            y2="77.18"
            gradientUnits="userSpaceOnUse"
        >
            <stop offset="0" stop-color="#00ce7c"></stop>
            <stop offset="1" stop-color="#4ac1e0"></stop>
        </linearGradient>
    </defs>
    <g id="Layer_2" dataname="Layer 2">
        <path
            class="path"
            stroke="url(#linear-gradient)"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16px"
            d="M43.92,123.29a11,11,0,0,1-11-11v-9.78a11,11,0,0,1,11-11h71.3a11,11,0,0,0,11-11V42.07a11,11,0,0,0-11-11H76.61a11,11,0,0,0-11,11v70.22a11,11,0,0,1-11,11Z"
            transform="translate(-24.92 -23.07)"
        ></path>
    </g>
</svg>

<svg
    class="pier-loading-spinner"
    preserveAspectRatio="xMaxYMid meet"
    viewBox="0 0 100 100"
    height="50px"
    width="50px"
>
    <defs>
        <linearGradient id="gradient1" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="#08D18B"></stop>
        </linearGradient>
        <linearGradient id="gradient2" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="rgba(0,255,255,0)"></stop>
        </linearGradient>
        <mask id="clip-rectangle">
            <circle cx="50" cy="50" r="50" fill="#fff"></circle>
            <circle cx="50" cy="50" r="43"></circle>
        </mask>
    </defs>
    <path
        fill="url(#gradient1)"
        d="M0 0H100V50H0z"
        mask="url(#clip-rectangle)"
    ></path>
    <path
        fill="url(#gradient2)"
        d="M0 50H100V100H0z"
        mask="url(#clip-rectangle)"
    ></path></svg
><svg
    class="-m-l-4"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 50 125 1"
    height="50"
    width="50"
>
    <defs>
        <linearGradient
            id="linear-gradient"
            x1="24.92"
            y1="77.18"
            x2="134.22"
            y2="77.18"
            gradientUnits="userSpaceOnUse"
        >
            <stop offset="0" stop-color="#00ce7c"></stop>
            <stop offset="1" stop-color="#4ac1e0"></stop>
        </linearGradient>
    </defs>
    <g id="Layer_2" dataname="Layer 2">
        <path
            class="path"
            stroke="url(#linear-gradient)"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16px"
            d="M43.92,123.29a11,11,0,0,1-11-11v-9.78a11,11,0,0,1,11-11h71.3a11,11,0,0,0,11-11V42.07a11,11,0,0,0-11-11H76.61a11,11,0,0,0-11,11v70.22a11,11,0,0,1-11,11Z"
            transform="translate(-24.92 -23.07)"
        ></path>
    </g>
</svg>

Sizes

Use the modifier classes pier-loading-spinner--sm, pier-loading-spinner--md, or pier-loading-spinner--lg to change the size of the Loading Spinner.

HTML markup

<svg
    class="pier-loading-spinner--sm"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMaxYMid meet"
>
    <defs>
        <linearGradient id="gradient1" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="#08D18B"></stop>
        </linearGradient>
        <linearGradient id="gradient2" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="rgba(0,255,255,0)"></stop>
        </linearGradient>
        <mask id="clip-rectangle">
            <circle id="outer" cx="50" cy="50" r="50" fill="#ffffff"></circle>
            <circle id="inner" cx="50" cy="50" r="45"></circle>
        </mask>
    </defs>
    <g>
        <rect
            width="100"
            height="50"
            fill="url(#gradient1)"
            mask="url(#clip-rectangle)"
        ></rect>
        <rect
            width="100"
            height="50"
            y="50"
            fill="url(#gradient2)"
            mask="url(#clip-rectangle)"
        ></rect>
    </g></svg
><svg
    class="pier-loading-spinner--md -m-l-4"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMaxYMid meet"
>
    <defs>
        <linearGradient id="gradient1" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="#08D18B"></stop>
        </linearGradient>
        <linearGradient id="gradient2" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="rgba(0,255,255,0)"></stop>
        </linearGradient>
        <mask id="clip-rectangle">
            <circle id="outer" cx="50" cy="50" r="50" fill="#ffffff"></circle>
            <circle id="inner" cx="50" cy="50" r="45"></circle>
        </mask>
    </defs>
    <g>
        <rect
            width="100"
            height="50"
            fill="url(#gradient1)"
            mask="url(#clip-rectangle)"
        ></rect>
        <rect
            width="100"
            height="50"
            y="50"
            fill="url(#gradient2)"
            mask="url(#clip-rectangle)"
        ></rect>
    </g></svg
><svg
    class="pier-loading-spinner--lg -m-l-4"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMaxYMid meet"
>
    <defs>
        <linearGradient id="gradient1" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="#08D18B"></stop>
        </linearGradient>
        <linearGradient id="gradient2" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="rgba(0,255,255,0)"></stop>
        </linearGradient>
        <mask id="clip-rectangle">
            <circle id="outer" cx="50" cy="50" r="50" fill="#ffffff"></circle>
            <circle id="inner" cx="50" cy="50" r="45"></circle>
        </mask>
    </defs>
    <g>
        <rect
            width="100"
            height="50"
            fill="url(#gradient1)"
            mask="url(#clip-rectangle)"
        ></rect>
        <rect
            width="100"
            height="50"
            y="50"
            fill="url(#gradient2)"
            mask="url(#clip-rectangle)"
        ></rect>
    </g>
</svg>

<svg
    class="pier-loading-spinner--sm"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMaxYMid meet"
>
    <defs>
        <linearGradient id="gradient1" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="#08D18B"></stop>
        </linearGradient>
        <linearGradient id="gradient2" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="rgba(0,255,255,0)"></stop>
        </linearGradient>
        <mask id="clip-rectangle">
            <circle id="outer" cx="50" cy="50" r="50" fill="#ffffff"></circle>
            <circle id="inner" cx="50" cy="50" r="45"></circle>
        </mask>
    </defs>
    <g>
        <rect
            width="100"
            height="50"
            fill="url(#gradient1)"
            mask="url(#clip-rectangle)"
        ></rect>
        <rect
            width="100"
            height="50"
            y="50"
            fill="url(#gradient2)"
            mask="url(#clip-rectangle)"
        ></rect>
    </g></svg
><svg
    class="pier-loading-spinner--md -m-l-4"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMaxYMid meet"
>
    <defs>
        <linearGradient id="gradient1" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="#08D18B"></stop>
        </linearGradient>
        <linearGradient id="gradient2" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="rgba(0,255,255,0)"></stop>
        </linearGradient>
        <mask id="clip-rectangle">
            <circle id="outer" cx="50" cy="50" r="50" fill="#ffffff"></circle>
            <circle id="inner" cx="50" cy="50" r="45"></circle>
        </mask>
    </defs>
    <g>
        <rect
            width="100"
            height="50"
            fill="url(#gradient1)"
            mask="url(#clip-rectangle)"
        ></rect>
        <rect
            width="100"
            height="50"
            y="50"
            fill="url(#gradient2)"
            mask="url(#clip-rectangle)"
        ></rect>
    </g></svg
><svg
    class="pier-loading-spinner--lg -m-l-4"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMaxYMid meet"
>
    <defs>
        <linearGradient id="gradient1" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="#08D18B"></stop>
        </linearGradient>
        <linearGradient id="gradient2" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="rgba(0,255,255,0)"></stop>
        </linearGradient>
        <mask id="clip-rectangle">
            <circle id="outer" cx="50" cy="50" r="50" fill="#ffffff"></circle>
            <circle id="inner" cx="50" cy="50" r="45"></circle>
        </mask>
    </defs>
    <g>
        <rect
            width="100"
            height="50"
            fill="url(#gradient1)"
            mask="url(#clip-rectangle)"
        ></rect>
        <rect
            width="100"
            height="50"
            y="50"
            fill="url(#gradient2)"
            mask="url(#clip-rectangle)"
        ></rect>
    </g>
</svg>

Dark

Use the modifier class pier-loading-spinner--dark to change the style of the LoadingSpinner for dark UI themes.

HTML markup

<svg
    class="pier-loading-spinner"
    preserveAspectRatio="xMaxYMid meet"
    viewBox="0 0 100 100"
    height="50px"
    width="50px"
>
    <defs>
        <linearGradient id="gradient1" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="#08D18B"></stop>
        </linearGradient>
        <linearGradient id="gradient2" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="rgba(0,255,255,0)"></stop>
        </linearGradient>
        <mask id="clip-rectangle">
            <circle cx="50" cy="50" r="50" fill="#fff"></circle>
            <circle cx="50" cy="50" r="43"></circle>
        </mask>
    </defs>
    <path
        fill="url(#gradient1)"
        d="M0 0H100V50H0z"
        mask="url(#clip-rectangle)"
    ></path>
    <path
        fill="url(#gradient2)"
        d="M0 50H100V100H0z"
        mask="url(#clip-rectangle)"
    ></path>
</svg>

<svg
    class="pier-loading-spinner"
    preserveAspectRatio="xMaxYMid meet"
    viewBox="0 0 100 100"
    height="50px"
    width="50px"
>
    <defs>
        <linearGradient id="gradient1" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="#08D18B"></stop>
        </linearGradient>
        <linearGradient id="gradient2" x2="1" y2="0">
            <stop offset="20%" stop-color="#25B9EF"></stop>
            <stop offset="100%" stop-color="rgba(0,255,255,0)"></stop>
        </linearGradient>
        <mask id="clip-rectangle">
            <circle cx="50" cy="50" r="50" fill="#fff"></circle>
            <circle cx="50" cy="50" r="43"></circle>
        </mask>
    </defs>
    <path
        fill="url(#gradient1)"
        d="M0 0H100V50H0z"
        mask="url(#clip-rectangle)"
    ></path>
    <path
        fill="url(#gradient2)"
        d="M0 50H100V100H0z"
        mask="url(#clip-rectangle)"
    ></path>
</svg>

Abstracts Components Utilities Attributions

Pier Design System

Loading Spinner

Base

HTML markup

Sizes

HTML markup

Dark

HTML markup