| 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 |
} |
| 50 |
|
