Code Coverage
 
Lines
Functions and Methods
Classes and Traits
Total
100.00%
9 / 9
100.00%
1 / 1
 CRAP
100.00%
1 / 1
Jetpack_Spinner
100.00%
9 / 9
100.00%
1 / 1
 1
100.00%
1 / 1
 render
100.00%
9 / 9
100.00%
1 / 1
 1
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 */
24class 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}