admin-pages
2 weeks ago
core-api
2 days ago
debugger
1 month ago
markdown
7 months ago
class-jetpack-ai-helper.php
4 months ago
class-jetpack-application-password-extras.php
3 months ago
class-jetpack-blog-stats-helper.php
7 months ago
class-jetpack-currencies.php
1 year ago
class-jetpack-instagram-gallery-helper.php
1 month ago
class-jetpack-mapbox-helper.php
3 years ago
class-jetpack-newsletter-category-helper.php
7 months ago
class-jetpack-podcast-feed-locator.php
1 month ago
class-jetpack-podcast-helper.php
5 months ago
class-jetpack-recommendations.php
1 month ago
class-jetpack-spinner.php
2 months ago
class-jetpack-top-posts-helper.php
2 weeks ago
class.color.php
1 year ago
class.core-rest-api-endpoints.php
2 weeks ago
class.jetpack-automatic-install-skin.php
2 years ago
class.jetpack-iframe-embed.php
3 years ago
class.jetpack-password-checker.php
7 months ago
class.jetpack-search-performance-logger.php
4 years ago
class.media-extractor.php
1 month ago
class.media-summary.php
2 weeks ago
class.media.php
7 months ago
components.php
7 months ago
debugger.php
1 month ago
icalendar-reader.php
1 month ago
markdown.php
7 months ago
plans.php
4 years ago
plugins.php
4 years ago
tonesque.php
7 months ago
widgets.php
3 months ago
class-jetpack-spinner.php
50 lines
| 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 |