Tutorial: Add a Progress Bar To Your Squarespace Blog

How ToCSS

Jan 16

Pin this post to Pinterest! ☝🏻

ADD A PROGRESS BAR TO YOUR BLOG

Blogs are such a pivotal component to increase SEO, which is why I've written so many blog posts on how to leverage your blog. Here's a whole series I did (part 1, 2, 3, 4), plus you can scroll to the bottom of this post for the complete list.

Not only is a good topic essential, but your post also needs to keep the reader engaged. One of the ways to do that is to add a progress bar at the top of your page. This also works really well in conjunction with adding a read time to your blog!

Today's post will show you a really easy to way add a progress bar to your blog and customize it to your settings. This is the finished result -

It also looks great on mobile -

WHY YOU NEED A PROGRESS BAR

I can't tell you how many times I get bogged down in an article and start thinking, “Will. this. ever. end…”. If I knew that I was almost to the end, then I would keep reading. But if there's nothing indicating how much more I have to read, I bail.

Back in the day I ran a half marathon. It was not fun in the moment. By the time I got to mile 10, I was ready to call it quits. And if I had no idea how many more miles were left, I very well may have. But to run past that 11 mile marker and know that I only had 2 more miles to go, I knew I could hang in there.

Same goes for your blog. You don't want people jumping ship early! A progress bar lets readers know how close they are to the finish line so that they'll actually finish.

Progress bars are also common surveys. That's because they don't want you to give up! The people conducting the survey need your survey response, so they want to make sure that you complete it.

Psst… feeling lost about CSS? Download this guide below 👇

Featured

HOW TO ADD A PROGRESS BAR

This is a very easy way to add a progress bar to the top (or bottom) of your blog posts. It will also ensure that it only shows up on the blog posts themselves and not the main blog page that displays all of your posts.

STEP 1:

First, click the gear icon to access the settings on your blog page. Then click Advanced -> Page Header Code Injection and paste this code -

<!-- Progress Bar on Blog -->
<div class="progress-bar-background">
    <div class="progress-bar" id="progressBar"></div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("progressBar").style.width = scrolled + "%";
}
</script>
<!-- End Progress Bar on Blog -->

We don't need to change any settings on this, so go to the next step.

STEP 2:

Go to Website Tools -> Custom CSS and paste this code -

// background of progress bar //
.progress-bar-background {
  width: 100%;
  height: 5px;
  background: #ccc;
  position: fixed;
  top: 0;
  z-index: 999;
}

// progress bar //
.progress-bar {
  height: 5px;
  background: #E996B4;
  width: 0%;
}

// hide bar on main blog page //
.collection-layout-default.view-list .progress-bar-background, .collection-layout-default.view-list .progress-bar{
  display: none;
}

Featured

STEP 3:

Now it's time to customize the settings in the code so that it matches your website. In the .progress-bar-background code, here are the things you can adjust:

height: Adjust this number if you want the bar to be taller or shorter
background: This is the background color of your bar. Right now it's set to a gray color, but you can replace it with a different hex code.
top: This code will add the progress bar to the top of your blog. If you want it at the bottom of the page, change 'top' to 'bottom'.

On the .progress-bar code, here is what you can edit:

height: Adjust this number if you want the bar to be taller or shorter. Be sure it is the same number as the height in the .progress-bar-background code!
background: This is the color of the progress bar. Right now it's set to the pink color on my website, but you can replace it with a different hex code that matches your branding.

And that's it! Drop a link to your blog in the comments to show off your new progress bar!