Scroll Progress Bar

<?php
add_action('wp_body_open', function() {
    echo '<div id="wpcode-progress-bar"></div>';
});

add_action('wp_head', function() {
    echo '<style>
        #wpcode-progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 4px;
            background-color: var(--wp--preset--color--primary, #007bff); /* Change the color as needed */
            z-index: 99;
        }
		@media( min-width: 769px ) {
		.admin-bar #wpcode-progress-bar {
			top: 32px;
		}
		}
    </style>';
});

add_action('wp_footer', function() {
    echo '<script>
        document.addEventListener("DOMContentLoaded", function() {
            document.addEventListener("scroll", function() {
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
                var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
                var scrolled = (scrollTop / (scrollHeight - clientHeight)) * 100;

                document.getElementById("wpcode-progress-bar").style.width = scrolled + "%";
            });
        });
    </script>';
});