Spinners

Ripple UI comes with a set of spinners that can be used to indicate loading state.

​

Default

Simple example of a spinners.

<div class="spinner-simple"></div>

​

Circle

Circle spinner.

<div class="spinner-circle"></div>

​

Dot intermittent

Dot intermittent spinner.

<div class="spinner-dot-intermittent"></div>

​

Ring

Ring spinner.

<svg class="spinner-ring" viewBox="25 25 50 50" stroke-width="5">
	<circle cx="50" cy="50" r="20" />
</svg>

​

Dot pulse

Dot pulse spinner.

<div class="spinner-dot-pulse">
	<div class="spinner-pulse-dot"></div>
</div>

​

Wave

Wave spinner.

<div class="spinner-wave">
	<div class="spinner-wave-dot"></div>
	<div class="spinner-wave-dot"></div>
	<div class="spinner-wave-dot"></div>
	<div class="spinner-wave-dot"></div>
</div>

​

Dot circle

Dot circle spinner.

<div class="spinner-dot-circle">
	<div class="spinner-dot"></div>
	<div class="spinner-dot"></div>
	<div class="spinner-dot"></div>
	<div class="spinner-dot"></div>
	<div class="spinner-dot"></div>
	<div class="spinner-dot"></div>
	<div class="spinner-dot"></div>
	<div class="spinner-dot"></div>
</div>

​

Colors

You can have different colors for spinners.

<div class="flex flex-row">
	<svg class="spinner-ring spinner-primary" viewBox="25 25 50 50" stroke-width="5">
		<circle cx="50" cy="50" r="20" />
	</svg>

	<svg class="spinner-ring spinner-secondary" viewBox="25 25 50 50" stroke-width="5">
		<circle cx="50" cy="50" r="20" />
	</svg>

	<svg class="spinner-ring spinner-success" viewBox="25 25 50 50" stroke-width="5">
		<circle cx="50" cy="50" r="20" />
	</svg>

	<svg class="spinner-ring spinner-error" viewBox="25 25 50 50" stroke-width="5">
		<circle cx="50" cy="50" r="20" />
	</svg>

	<svg class="spinner-ring spinner-warning" viewBox="25 25 50 50" stroke-width="5">
		<circle cx="50" cy="50" r="20" />
	</svg>
</div>

​

Size

You can have different sizes for spinners.

<div class="flex flex-row">
	<svg class="spinner-ring spinner-primary spinner-sm" viewBox="25 25 50 50" stroke-width="5">
		<circle cx="50" cy="50" r="20" />
	</svg>

	<svg class="spinner-ring spinner-primary spinner-md" viewBox="25 25 50 50" stroke-width="5">
		<circle cx="50" cy="50" r="20" />
	</svg>

	<svg class="spinner-ring spinner-primary spinner-lg" viewBox="25 25 50 50" stroke-width="5">
		<circle cx="50" cy="50" r="20" />
	</svg>

	<svg class="spinner-ring spinner-primary spinner-xl" viewBox="25 25 50 50" stroke-width="5">
		<circle cx="50" cy="50" r="20" />
	</svg>
</div>

​

Custom

You can change the colors of the spinner

<div class="spinner-dot-intermittent [--spinner-color:var(--pink-8)]"></div>
<div class="spinner-circle [--spinner-color:var(--pink-8)]"></div>

​

API