Прогресс-бар

Чтобы добавить прогресс-бар в ваш проект, создайте виджет Code, дважды кликните на него и вставьте следующий код в раздел Widget code, удалив серый текст:

<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-color: #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>

Нажмите Save & Close, чтобы сохранить изменения.

Вы можете кастомизировать внешний вид прогресс-бара, редактируя параметры .bar-container и .progress-bar. Первый отвечает за отображение самого индикатора, а вторая — за заполняющий его цвет. К примеру, вы можете увеличитьвысоту прогресс-бара или изменить фоновый цвет (background-color).