Skip to content

Instantly share code, notes, and snippets.

@danielpost
Last active September 10, 2023 23:16
Show Gist options
  • Save danielpost/5f2929f1df9be2350707359a837c207c to your computer and use it in GitHub Desktop.
Save danielpost/5f2929f1df9be2350707359a837c207c to your computer and use it in GitHub Desktop.
WordPress SVG spinner. No more spinner.gif!
/**
* WordPress dependencies
*/
import { SVG, Circle } from '@wordpress/primitives';
const spinner = (
<SVG fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<Circle cx="18" cy="18" r="18" fill="#a2a2a2" />
<Circle cx="18" cy="8" r="4" fill="#f1f1f1">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1100ms"
repeatCount="indefinite"
/>
</Circle>
</SVG>
);
export default spinner;
Display the source blob
Display the rendered blob
Raw
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="18" height="18">
<circle cx="18" cy="18" r="18" fill="#a2a2a2" />
<circle cx="18" cy="8" r="4" fill="#f1f1f1">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1100ms"
repeatCount="indefinite"
/>
</circle>
</svg>
/**
* WordPress dependencies
*/
import { Icon } from '@wordpress/icons';
/**
* Internal dependencies
*/
import spinner from './spinner';
<Icon icon={spinner} />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment