Embed Code

Paste the snippet below into your page and the spinner renders with no external requests. Set the color with data-color and the SVG size with data-size (px number or CSS length).

Loading…

Multiple Spinners

The script renders every [data-halftone-spinner] element on the page — paste the script once and add as many divs as you like, each with its own color and size. Elements added dynamically after the script runs (e.g. by a SPA) are rendered automatically, and pasting the snippet more than once is safe.

<div data-halftone-spinner data-color="#e04040" data-size="96"></div>
<div data-halftone-spinner data-color="#4060e0" data-size="64"></div>
<div data-halftone-spinner data-color="#20a060" data-size="48"></div>
<script>/* bundled source — paste once */</script>

GIF Animation

Prefer a plain image? The same animation is available as a looping GIF (one full cycle) on a white or black background, in 256×256 and 512×512.

White: 256×256 / 512×512

Black: 256×256 / 512×512