Loading

Kriyā provides linear 'Progress' bars and circular 'Spinners' so you can give users visual feedback when content is loading.

Progress

A couple of options for you: determinate and indeterminate:

<div class="progress">
	<div class="determinate" style="width: 70%"></div>
</div>
<div class="progress">
	<div class="indeterminate"></div>
</div>

Spinner

You need to nest your spinner in a loading-wrapper div. Show or hide this animation by toggling the is-active class.

<div class="loading-wrapper is-active">
	<div class="spinner-layer">
		<div class="circle-clipper left">
			<div class="circle"></div>
		</div><div class="gap-patch">
			<div class="circle"></div>
		</div><div class="circle-clipper right">
			<div class="circle"></div>
		</div>
	</div>
</div>