Barra de progreso para sitio web con degradado

Este código crea una la barra de progreso se llena con el color especificado a medida que el usuario se desplaza por la página, la barra se muestra en la parte superior de tu sitio web con un degradado de color que va desde #ccf86c hasta #c1f64f. La barra de progreso es transparente y siempre está visible, superponiéndose a otros elementos gracias al uso de z-index. Ajusta los colores y estilos según tus preferencias.

Aquí tienes un código que puedes agregar mediante Code Snippets en WordPress:

 

<style>
/* Estilos para la barra de progreso */
#progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px; /* Altura de la barra de progreso */
background: transparent; /* Fondo transparente */
z-index: 9999; /* Z-index para superponerse a otros elementos */
display: none; /* Ocultar inicialmente */
}

#progress-bar {
height: 100%;
width: 0;
background: linear-gradient(to right, #c2d237, #089fde); /* Degradado de color */
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
// Muestra la barra de progreso
document.getElementById("progress-container").style.display = "block";

// Calcula y actualiza el progreso
function updateProgress() {
const scrollPosition = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
const documentHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrollPercentage = (scrollPosition / documentHeight) * 100;
document.getElementById("progress-bar").style.width = scrollPercentage + "%";
}

// Actualiza el progreso al desplazarse
window.addEventListener("scroll", updateProgress);

// Actualiza el progreso al cambiar el tamaño de la ventana
window.addEventListener("resize", updateProgress);
});
</script>

<!-- Estructura HTML de la barra de progreso -->
<div id="progress-container">
<div id="progress-bar"></div>
</div>