WP_Interactivity_API::get_router_animation_styles │ private │ WP 6.5.0

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

Method of the class: WP_Interactivity_API{}

No Hooks.

Returns

String. The CSS styles for the router's top loading bar animation.

Usage

// private - for code of main (parent) class only
$result = $this->get_router_animation_styles(): string;

Changelog

Since 6.5.0 Introduced.

WP_Interactivity_API::get_router_animation_styles() code WP 6.8.1

wp-includes/interactivity-api/class-wp-interactivity-api.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;
}