Barra de progreso – Readymag Help

El código personalizado funciona en todos los planes de pago (excepto en el plan Creator que ya ha sido archivado).

Con un plan gratuito, puedes ver el código funcionando en el modo vista previa, pero no en un proyecto publicado.

Para añadir una barra de progreso a tu proyecto, crea un widget de código, luego haz doble clic en él e inserta el siguiente código dentro de la pestaña ‘Widget Code’ (eliminando el texto que aparece por defecto):

<div class="bar-container">
  <div class="progress-bar" id="mybar"></div>
</div>

<style>
.bar-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 25px;
  width: 100%;
  background-color: #dee4e6;
  z-index: 1;
}

.progress-bar {
  height: 100%;
  background: #084b15;
  width: 0%;
}
</style>

<script>
const isVerticalViewer = Boolean(document.querySelector('.mag.viewer-type-vertical'));
const myBar = document.getElementById("mybar");

function onScroll() {
  const page = isVerticalViewer ? document.documentElement : document.querySelector('.content-scroll-wrapper');
  const pageScroll = page.scrollTop;
  const pageHeight = page.scrollHeight - window.innerHeight;
  const scrollAmount = (pageScroll / pageHeight) * 100;

  myBar.style.width = `${scrollAmount}%`;
}

if (isVerticalViewer) {
  window.addEventListener('scroll', onScroll);
  } else {
document.querySelector('.content-scroll-wrapper').addEventListener('scroll', onScroll);
}
</script>

A continuación, presiona 'Save & Close' para aplicar este código.

Puedes personalizar la apariencia editando las propiedades de .bar-container y .progress-bar, la primera corresponde al contenedor vacío que se muestra debajo de la barra y la segunda a la propia barra progresiva. Por ejemplo, aumenta la altura modificando el valor height o cambia el código HEX en background-color para cambiar el color de la barra.

Artículos relacionados