Прогресс бар при скроле страницы

art-custom-edits.php

/**
 * Прогресс бар при скроле страницы
 *
 * @author   Artem Abramovich
 * @verphp   7.0
 */
function art_progress_bar() {

	?>
	<style>
		progress {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 5px;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			border: none;
			background: transparent;
			color: #fe3b3b;
			z-index: 100000;
		}

		progress::-webkit-progress-bar {
			background: transparent;
			border-radius: 5px;
		}

		progress::-webkit-progress-value {
			background: #fe3b3b;
			border-radius: 5px;
		}

		progress::-moz-progress-bar {
			background: #fe3b3b;
			border-radius: 5px;
		}

		.progress-container {
			width: 100%;
			background: transparent;
			position: fixed;
			top: 0;
			left: 0;
			height: 5px;
			display: block;
		}

		.progress-bar {
			background: #fe3b3b;
			width: 0;
			display: block;
			height: inherit;
		}
	</style>
	<script>
		 jQuery( function( $ ) {
			 $( window ).on( 'scroll resize', function() {
				 var option = $( window ).scrollTop() / (
					 $( document ).height() - $( window ).height()
				 );

				 $( '.progress-bar' ).css( {
					 'width': ( 100 * option | 0 ) + '%'
				 } );

				 $( 'progress' )[0].value = option;
			 } );
		 } );
	</script>
	<div class="progress-bar-wrapper">
		<progress value="0">
				<span class="progress-container">
					<span class="progress-bar"></span>
				</span>
		</progress>
	</div>

	<?php

}

add_action( 'wp_body_open', 'art_progress_bar' );