Loading Indicators

Loading Indicators are small components used to indicate to the user that a part of their application is currently loading.

EXAMPLE

Show Code

 
<span class="loading-indicator"></span>

Sizing

Loading Indicators can be sized proportionally using the utility classes listed below.

EXAMPLE

Show Code

 
<span class="loading-indicator tiny"></span>
<span class="loading-indicator small"></span>
<span class="loading-indicator medium"></span>
<span class="loading-indicator large"></span>
<span class="loading-indicator xlarge"></span>

Ghosting Loading Indicators

Loading Indicators can be used on dark backgrounds using the .ghost class. See the ghosting section for use of .ghost-children and more explanation.

EXAMPLE

Show Code

 
<div class="bg-off-black">
    <span class="loading-indicator tiny ghost"></span>
    <span class="loading-indicator small ghost"></span>
    <span class="loading-indicator medium ghost"></span>
    <span class="loading-indicator large ghost"></span>
    <span class="loading-indicator xlarge ghost"></span>
</div>

Example Modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Back to Version Explorer!