Dynamic Reading Position Progress Bar – proBaws.js

Category: Loading | January 18, 2022
Views Total:341 views
Official Page:Go to website
Last Update:January 18, 2022


Dynamic Reading Position Progress Bar – proBaws.js


proBaws.js is a JavaScript library for drawing a dynamic reading position progress bar on the top of the page.

When users scroll down the page, they will see the progress bar change. The progress bar starts off as empty and slowly fills up as you scroll down the page.

How to use it:

1. Import the proBaws.js into your document.

<link rel="stylesheet" href="css/probaws.min.css" />
<script src="js/probaws.min.js"></script>

2. Create an empty progress container at the top of the page.

<div class="progress"></div>

3. That’s it. You can customize the reading position progress bar via CSS.

.progress {
  position: fixed;
  left: 0;
  top: 0;
  width: 0%;
  height: 4px;
  background-color: tomato;

You Might Be Interested In:

Leave a Reply