Hoy encontrará la barra de progreso de desplazamiento de página en muchos sitios web. Especialmente en sitios web alojados en WordPress y algunos sitios web alojados en Blogger.
La mayoría de los diseñadores de plantillas de Blogger agregan esta barra de progreso de forma predeterminada en la plantilla. Pero si no tiene esa barra de progreso en su plantilla, puede agregarla manualmente.
Si se da cuenta, verá que también estoy usando la indicación de la barra de progreso de desplazamiento en este sitio web. Echa un vistazo a la parte superior de esta página web.
Esta barra de progreso de desplazamiento de página está fija en la parte superior de su página web.
Para agregar esta barra de progreso de desplazamiento de página en Blogger, siga los pasos que se proporcionan a continuación.
Pasos para agregar la barra de progreso de desplazamiento de página en Blogger:
- Ir Panel de Blogger
- Ir Sección de tema/plantilla
- Hacer clic Editar HTML
- Ahora busca
- Ahora copie el código proporcionado a continuación y agréguelo arriba de la etiqueta que hemos encontrado en el paso 4.
- Ahorrar Tema/Plantilla
Para buscar cualquier cosa en la sección de plantillas de Blogger, presione Control+F y luego escriba el término para buscar y presione enter.
<div class="progress"></div>
<style>
.progress {
background: linear-gradient(to right, #fc801c var(--scroll), transparent 0);
background-repeat: no-repeat;
position: fixed;
top:0;
left:0;
width: 100%;
height: 4px;
z-index: 1;
animation:background .5s;
}
</style>
<script>
var h = document.documentElement,
b = document.body,
st="scrollTop",
sh="scrollHeight",
progress = document.querySelector('.progress'),
scroll;
document.addEventListener('scroll', function() {
scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
progress.style.setProperty('--scroll', scroll + '%');
}, {
passive: true
});
</script>Después de agregar la funcionalidad de la barra de progreso de desplazamiento de página en su sitio web, permítame contarle algo sobre los códigos que le proporcioné anteriormente.
En palabras simples, analicemos el código que le he proporcionado.
Análisis de código:
En el código CSS que he usado posición: fija; superior: 0; para arreglar este indicador de barra de progreso de desplazamiento de página en la parte superior de la página web.
Luego usé degradados como el color de fondo y la cantidad de relleno del degradado y para eso, tengo que usar la variable CSS llamada var(–desplazamiento) porque la variable se actualizará automáticamente cada vez que hagamos scroll en nuestra página web.
En el código JavaScript, simplemente tiene que obtener el valor de la página desplazada mediante el uso del evento de desplazamiento.
scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;Luego tenemos que establecer el valor de desplazamiento de la página en la variable CSS usando.
progress.style.setProperty('--scroll', scroll + '%');Eso es todo sobre el indicador de barra de progreso de desplazamiento de página, parece bastante bueno.
Envolver:
Mi mente voló cuando vi esto indicador de barra de progreso de desplazamiento de página es por eso que lo agregué a mi sitio web ahora, si le gusta este indicador de barra de progreso de desplazamiento de página, también puede usarlo en su sitio web.