Skip Navigation

Loading Indicators

Loading indicators are used to notify the user that a piece of content or data is loading at that the page or container is not meant to be blank. Indicators can be either determinate or indeterminate.

Determinate

Determinate indicators are used when the precise progress of the loading is known, e.g. file download progress.

Indeterminate

Indeterminate indicators are used when the exact progress isn't known or to notify the user that the system is doing something and hasn't locked up.

Circle Determinate

Top of Section

document.addEventListener("DOMContentLoaded", function(event){
var loaders = document.getElementsByClassName('uscb-loading-circular-indeterminate');
loaders = Array.prototype.slice.call( loaders );

loaders.forEach( function(el) {
el.innerHTML =
'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"' +
' width="100%" height="100%" viewBox="0 0 108 108" xml:space="preserve" >' +
' <path fill="#FFFFFF" stroke-width="8" stroke-miterlimit="10" endcap="butt" d="M 54,54 m -50,0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0"/>' +
'</svg>';

// Detect MS browsers and add the class suffix to display the correct animation
if ( document.documentMode || !!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g) || !!navigator.userAgent.match(/Edge/g) ) {
el.className = 'uscb-loading-circular-indeterminate-IE';
}
});
});

Top of Section