A progress indicator provides a visual indicator that the application is loading content. The type of indicator is dependent on the type of content and how long the operation will take. The placement and size of the indicator will be determined by the content area and the type of process.
<div class="pxh-spinner"></div>
<div class="pxh-spinner pxh-spinner--margin"></div>
<div class="pxh-spinner pxh-spinner--no-margin"></div>
<div class="pxh-spinner pxh-spinner--small"></div>
<div class="pxh-spinner pxh-spinner--large"></div>
<div class="pxh-spinner pxh-spinner--finished"></div>
The pxh-spinner--finished
modifier class completely hides the spinner and all its spacing. This is helpful if you want to hide the spinner but keep its element in the DOM.
<div class="pxh-spinner pxh-spinner--inverted"></div>
<div class="pxh-spinner pxh-spinner--small pxh-spinner--inverted"></div>
<div class="pxh-spinner pxh-spinner--large pxh-spinner--inverted"></div>
<div class="pxh-spinner pxh-spinner--large pxh-spinner--inverted pxh-spinner--finished"></div>