How to add progress bar to blog posts
This guide will show you how to add a progress bar to blog posts.
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-screencast-2566-05-04_sgof9j.gif)
Copy this code:
Paste the copied code in Blog > Each blog post </body> custom HTML code
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/chromezqcnxh04z0_86xyy7.png)
Now copy this code:
Paste this code in Blog > Each blog post <head> custom HTML code
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/chromekw2d5uklr9_wd6e5d.png)
In this code, specify the desired color for your progress bar
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_beabju.png)
Your blog posts now have a progress bar.
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-screencast-2566-05-04_sgof9j.gif)
Step 1
Copy this code:
<div id="progressBarContainer">
<div id="progressBar"></div>
</div>
<script>
window.addEventListener("scroll", updateProgressBar);
function updateProgressBar() {
const scrollableHeight =
document.documentElement.scrollHeight - window.innerHeight;
const scrollPercentage = (window.pageYOffset / scrollableHeight) * 100;
const progressBar = document.getElementById("progressBar");
progressBar.style.width = scrollPercentage + "%";
}
</script>
Step 2
Paste the copied code in Blog > Each blog post </body> custom HTML code
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/chromezqcnxh04z0_86xyy7.png)
Step 3
Now copy this code:
<style>
#progressBarContainer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
z-index: 9999;
}
#progressBar {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #4D61FC;
width: 0%;
}
</style>
Step 4
Paste this code in Blog > Each blog post <head> custom HTML code
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/chromekw2d5uklr9_wd6e5d.png)
Step 5
In this code, specify the desired color for your progress bar
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/monosnap-unicorn-platform-buil_beabju.png)
Done!
Your blog posts now have a progress bar.
Updated on: 18/12/2023
Thank you!