# Squarespace Page Progress Bar

**URL:** <https://community.elfsight.com/t/squarespace-page-progress-bar/170290>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [August 5, 2026, 7:26am UTC](https://community.elfsight.com/t/squarespace-page-progress-bar/170290 "2026-08-05T07:26:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [August 5, 2026, 7:26am UTC](https://community.elfsight.com/t/squarespace-page-progress-bar/170290/1 "2026-08-05T07:26:32Z")

</div>

**Description**

- adding reading progress bar to top or bottom of page in Squarespace
- demo: [https://tuanphan-demo.squarespace.com/0726c31v11-page-progress-bar?noredirect](https://tuanphan-demo.squarespace.com/0726c31v11-page-progress-bar?noredirect)
- pass: abc

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/b/eb0fd65a34a8ab2ae53bab068efa8e5f48febb0c.jpeg)

**#1.1.** Hover on Page where you want to add reading progress bar \> Click Gear icon

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/c/5c5d632a46ea6066299c7f5a75de37cfab17cc2c.png)

**#1.2.** Click Advanced \> Paste this code

- If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1
- If you want to make reading progress bar appears on All Pages, you can add code to Code Injection \> Footer

```auto
<!-- 07.26c31v11 Page Progress Bar -->
<script>
window.PageProgressBarConfig = {
  position: "bottom",
  height: "7px",
  activeColor: "#f1f",
  trackColor: "transparent",
  borderRadius: "0px",
  transition: "width 0.12s linear",
  zIndex: 99999,
  showPercent: true,
  percentColor: "#111111",
  percentFontSize: "32px",
  percentFontSizeMobile: "22px",
  percentGap: "16px",
  percentBreakpoint: "767px"
};
// position options: top | bottom
// showPercent only renders when position is "bottom"
</script>
<script src="https://code.beaverhero.com/other/0726c31v11pageprogressbarv2.js"></script>

```

**#2.1.** To change position of reading progress bar to bottom of page, you can change line 04

```auto
position: "top",

```

to

```auto
position: "bottom",

```

**#2.2.** To change height of reading progress bar, change line 05

```auto
height: "7px",

```

**#2.3.** To change color of progress bar, change line 06, line 07

```auto
activeColor: "#f1f",
  trackColor: "transparent",

```

If you need to tweak more, use [this AI Assistant (designed for Squarespace sites)](https://toolkit.will-myers.com/robo-will?via=tuan-phan)

**#3.1.** If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown Block to current page (page where you want to add reading progress bar) or add Markdown Block to Site Footer (if you want to make progress bar appears on All pages).

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/5/a5b7c63b8bf5d6bd492784a712cbb1709ce8e8e0.png)

Then add this code into Markdown Block

```auto
<script>
window.PageProgressBarConfig = {
  position: "bottom",
  height: "7px",
  activeColor: "#f1f",
  trackColor: "transparent",
  borderRadius: "0px",
  transition: "width 0.12s linear",
  zIndex: 99999,
  showPercent: true,
  percentColor: "#111111",
  percentFontSize: "32px",
  percentFontSizeMobile: "22px",
  percentGap: "16px",
  percentBreakpoint: "767px"
};
// position options: top | bottom
// showPercent only renders when position is "bottom"
</script>
<script src="https://code.beaverhero.com/other/0726c31v11pageprogressbarv2.js"></script>

```