← All changes | _inc/lib/class-jetpack-spinner.php +49 -0 16.2-beta → 16.3 View file →

		@@ -1,0 +1,49 @@
	1	+<?php
	2	+/**
	3	+ * Jetpack Spinner Helper
	4	+ *
	5	+ * Provides a standardized loading spinner SVG that visually matches
	6	+ * the WordPress Core Spinner (@wordpress/components Spinner).
	7	+ *
	8	+ * For React/JS editor and admin contexts, use:
	9	+ * import { Spinner } from '@wordpress/components';
	10	+ *
	11	+ * For PHP wp-admin contexts, use:
	12	+ * <span class="spinner is-active"></span>
	13	+ *
	14	+ * For frontend contexts where wp-admin CSS is unavailable, use this helper:
	15	+ * Jetpack_Spinner::render();
	16	+ *
	17	+ * @package automattic/jetpack
	18	+ * @since 15.8
	19	+ */
	20	+
	21	+/**
	22	+ * Renders an inline SVG spinner matching the WordPress Core visual.
	23	+ */
	24	+class Jetpack_Spinner {
	25	+
	26	+ /**
	27	+ * Returns the SVG markup for a spinner matching the WP Core Spinner visual:
	28	+ * a gray circle track with a rotating quarter-arc indicator.
	29	+ *
	30	+ * Uses <animateTransform> for CSS-free animation, making it safe for
	31	+ * frontend contexts where wp-admin styles are not enqueued.
	32	+ *
	33	+ * @since 15.8
	34	+ *
	35	+ * @param int $size Width and height in pixels. Default 24.
	36	+ * @return string SVG markup.
	37	+ */
	38	+ public static function render( $size = 24 ) {
	39	+ return sprintf(
	40	+ '<svg class="jetpack-spinner" width="%1$d" height="%1$d" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">'
	41	+ . '<circle cx="50" cy="50" r="46" fill="none" stroke="#ddd" stroke-width="8"/>'
	42	+ . '<path d="M 50 4 A 46 46 0 0 1 96 50" fill="none" stroke="currentColor" stroke-width="8" stroke-linecap="round">'
	43	+ . '<animateTransform attributeName="transform" type="rotate" dur="1.4s" from="0 50 50" to="360 50 50" repeatCount="indefinite"/>'
	44	+ . '</path>'
	45	+ . '</svg>',
	46	+ (int) $size
	47	+ );
	48	+ }
	49	+}