Skip to Main Content

SVG

Spinner

The spinner is SVG code inside a 'Static Content' region.
Region appearance has a fixed size CSS class. I.e. 'h300'.
SVG uses DEF tags to define gradient.
Animations are done using the CSS. 
<svg version="1.1" id="loading-spinner" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 48 48" xml:space="preserve" style="height:100%;">
    <defs>
        <linearGradient id="spinner-gradient-a" x1="49.892%" x2="55.03%" y1="58.241%" y2="89.889%">
            <stop offset="0%" />
            <stop offset="22.44%" stop-opacity=".59" />
            <stop offset="100%" stop-opacity="0" />
        </linearGradient>
    </defs>
    <g fill="none" transform="translate(-8 -8)">
        <path
            d="M32,56 C18.745166,56 8,45.254834 8,32 C8,18.745166 18.745166,8 32,8 C45.254834,8 56,18.745166 56,32 C56,45.254834 45.254834,56 32,56 Z M32,52 C43.045695,52 52,43.045695 52,32 C52,20.954305 43.045695,12 32,12 C20.954305,12 12,20.954305 12,32 C12,43.045695 20.954305,52 32,52 Z" />
        <path fill="url(#spinner-gradient-a)"
            d="M56,32 C56,33.1045695 55.1045695,34 54,34 C52.8954305,34 52,33.1045695 52,32 C52,20.954305 43.045695,12 32,12 C20.954305,12 12,20.954305 12,32 C12,43.045695 20.954305,52 32,52 C33.1045695,52 34,52.8954305 34,54 C34,55.1045695 33.1045695,56 32,56 C18.745166,56 8,45.254834 8,32 C8,18.745166 18.745166,8 32,8 C45.254834,8 56,18.745166 56,32 Z"
            transform="rotate(45 32 32)" />
    </g>
</svg>

Animation

The animate tag animates an attribute with a from and to value.
Also duration, begin and repeatCount are set. 
#loading-spinner.run {
    animation: loading-spinner 1s linear infinite;
}

@keyframes loading-spinner {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg)
    }
}

Bar

The spinner is SVG code inside a 'Static Content' region.
Region appearance has a fixed size CSS class. I.e. 'h300'.
Animations are done using the CSS. 
<svg version="1.1" id="loading-bar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 36 22" xml:space="preserve" style="height:100%;">
    <g>
        <rect id="loading-bar-left" width="8" height="22" />
        <rect id="loading-bar-middle" width="8" height="22" x="14" />
        <rect id="loading-bar-right" width="8" height="22" x="28" />
    </g>
</svg>

Animation

The animate tag animates an attribute with a from and to value.
Also duration, begin and repeatCount are set. 
#loading-bar.run #loading-bar-left {
    animation: loading-bar-morph 1s linear .1s infinite;
    transform-origin: center;
}

#loading-bar.run #loading-bar-middle {
    animation: loading-bar-morph 1s linear .2s infinite;
    transform-origin: center;
}

#loading-bar.run #loading-bar-right {
    animation: loading-bar-morph 1s linear .4s infinite;
    transform-origin: center;
}

@keyframes loading-bar-morph {
    0%  {
        transform: scaleY(1)
    }
    
    25% {
        transform: scaleY(0.3)
    }
    
    50% {
        transform: scaleY(0.7)
    }
    
    75% {
        transform: scaleY(0.15)
    }    
}
Release 1.0