Predix

Notifications
There are no new notifications.

Loading Indicator

Progress & Activity

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.

pxh-spinner (circular loader) — view demo

A circular loader is best used to indicate to the user that a single loading process is taking place. A circular loader will generally center within the content area or loading process.

Usage

<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>