> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.unicornplatform.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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)

# Step 1

Copy this code:

```javascript
<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, and click the save icon.**

![](https://storage.crisp.chat/users/helpdesk/website/-/7/e/7/8/7e782a40c0560c00/screenshot-2025-07-15-132625_utfuk3.png)

# Step 3

Now copy this code:

```css
<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, and click the save icon.**

![](https://storage.crisp.chat/users/helpdesk/website/-/7/e/7/8/7e782a40c0560c00/screenshot-2025-07-15-132808_1o12iyq.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.