Dynamic Reading Position Progress Bar – proBaws.js

Category: Loading | January 18, 2022
Author:moblamobla
Views Total:249 views
Official Page:Go to website
Last Update:January 18, 2022
License:MIT

Preview:

Dynamic Reading Position Progress Bar – proBaws.js

Description:

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