Title: WP_Interactivity_API::get_router_animation_styles
Published: April 3, 2024
Last modified: February 24, 2026

---

# WP_Interactivity_API::get_router_animation_styles(): string

## In this article

 * [Return](https://developer.wordpress.org/reference/classes/wp_interactivity_api/get_router_animation_styles/?output_format=md#return)
 * [Source](https://developer.wordpress.org/reference/classes/wp_interactivity_api/get_router_animation_styles/?output_format=md#source)
 * [Related](https://developer.wordpress.org/reference/classes/wp_interactivity_api/get_router_animation_styles/?output_format=md#related)
 * [Changelog](https://developer.wordpress.org/reference/classes/wp_interactivity_api/get_router_animation_styles/?output_format=md#changelog)

[ Back to top](https://developer.wordpress.org/reference/classes/wp_interactivity_api/get_router_animation_styles/?output_format=md#wp--skip-link--target)

This function’s access is marked private. This means it is not intended for use 
by plugin or theme developers, only by core. It is listed here for completeness.

Returns the CSS styles for animating the top loading bar in the router.

## 󠀁[Return](https://developer.wordpress.org/reference/classes/wp_interactivity_api/get_router_animation_styles/?output_format=md#return)󠁿

 string The CSS styles for the router’s top loading bar animation.

## 󠀁[Source](https://developer.wordpress.org/reference/classes/wp_interactivity_api/get_router_animation_styles/?output_format=md#source)󠁿

    ```php
    	private function get_router_animation_styles(): string {
    		return <<<CSS
    			.wp-interactivity-router-loading-bar {
    				position: fixed;
    				top: 0;
    				left: 0;
    				margin: 0;
    				padding: 0;
    				width: 100vw;
    				max-width: 100vw !important;
    				height: 4px;
    				background-color: #000;
    				opacity: 0
    			}
    			.wp-interactivity-router-loading-bar.start-animation {
    				animation: wp-interactivity-router-loading-bar-start-animation 30s cubic-bezier(0.03, 0.5, 0, 1) forwards
    			}
    			.wp-interactivity-router-loading-bar.finish-animation {
    				animation: wp-interactivity-router-loading-bar-finish-animation 300ms ease-in
    			}
    			@keyframes wp-interactivity-router-loading-bar-start-animation {
    				0% { transform: scaleX(0); transform-origin: 0 0; opacity: 1 }
    				100% { transform: scaleX(1); transform-origin: 0 0; opacity: 1 }
    			}
    			@keyframes wp-interactivity-router-loading-bar-finish-animation {
    				0% { opacity: 1 }
    				50% { opacity: 1 }
    				100% { opacity: 0 }
    			}
    CSS;
    	}
    ```

[View all references](https://developer.wordpress.org/reference/files/wp-includes/interactivity-api/class-wp-interactivity-api.php/)
[View on Trac](https://core.trac.wordpress.org/browser/tags/6.9.4/src/wp-includes/interactivity-api/class-wp-interactivity-api.php#L1239)
[View on GitHub](https://github.com/WordPress/wordpress-develop/blob/6.9.4/src/wp-includes/interactivity-api/class-wp-interactivity-api.php#L1239-L1269)

## 󠀁[Related](https://developer.wordpress.org/reference/classes/wp_interactivity_api/get_router_animation_styles/?output_format=md#related)󠁿

| Used by | Description | 
| [WP_Interactivity_API::data_wp_router_region_processor()](https://developer.wordpress.org/reference/classes/wp_interactivity_api/data_wp_router_region_processor/)`wp-includes/interactivity-api/class-wp-interactivity-api.php` |

Processes the `data-wp-router-region` directive.

  |

## 󠀁[Changelog](https://developer.wordpress.org/reference/classes/wp_interactivity_api/get_router_animation_styles/?output_format=md#changelog)󠁿

| Version | Description | 
| [6.5.0](https://developer.wordpress.org/reference/since/6.5.0/) | Introduced. |

## User Contributed Notes

You must [log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_interactivity_api%2Fget_router_animation_styles%2F)
before being able to contribute a note or feedback.