Skeleton Screen

A skeleton screen gives a visual cue that content is loading one after the other into each UI element area. We suggest using skeleton screen for content densitive pages.

There are three types of skeleton elements:

1. Circle: Cicular shape which width and height are equal to parents' width, class name circle;
2. Square: Width and height are equal to parents' width, class name square;
3. Rectangle: Width equals to parents, height can be medium md or large lg.

<div class="skeleton circle" />
<div class="skeleton square"/>
<div class="skeleton rectangle"/>

Rectangle skeleton with different height.

<div class="col-with-row-gap">
	<div class="skeleton rectangle"/>
	<div class="skeleton rectangle md"/>
	<div class="skeleton rectangle md"/>
	<div class="skeleton rectangle lg"/>
</div>

Spin Loading

Loading indicator is used for loading and updating. loading class is regular size, lg is large size.

<div class="loading"/>
<div class="loading lg"/>

You can also use animated loading indicator inline inline with other elements.

<button>
	<div class="loading inline"></div>
		 Uploading
</button>

Using white class can change the ring color to white.

<button class="primary">
	<div class="loading inline white"></div>
		Uploading
</button>

Using gray class can change the ring color to gray.

<button class="primary">
	<div class="loading inline gray"></div>
		Uploading
</button>