Custom code works on all paid plans (except for the archived Creator plan). With a Free plan, you can see working code in Preview mode but not in a published project.
We recommend enlisting a professional web developer to work with Code Injection—Readymag support won’t be able to assist with custom code issues.
To add an progress bar to your project, create a Сode widget, double-click on it and insert the following code into the widget's code section (removing all the rest):
<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>
Next, press ‘Save & Close’ to apply this code.
You can customize the appearance by editing the properties of .bar-container and .progress-bar, the first one corresponds to the empty container shown below the bar and the latter to the progressive bar itself. For instance, increase their height values to make them higher or change their background-color code to edit their color.