Animated Top Progress Bar For Reading Progress – wavescrollbar

Preview:

Description:

wavescrollbar is a standalone JavaScript library that creates an animated, striped top progress bar to indicate the reading time & scroll position in your document.

How to use it:

1. Install & download the package.

# Yarn
$ yarn add wavescrollbar
# NPM
$ npm install wavescrollbar --save

2. Load the wavescrollbar’s JavaScript and Stylesheet in the document.

<link rel="stylesheet" href="./dist/css/wavescrollbar.css" />
<script src="./dist/js/wavescrollbar.js"></script>

3. Create an emplty container to place the progress bar.

<wavescrollbar>
</wavescrollbar>

4. Initialize the library to generate a basic top progress bar.

var wavescrollbar = new Wavescrollbar()

5. Set the height of the progress bar.

wavescrollbar.setHeight("100px")

6. Set the background color of the container element.

wavescrollbar.setContainerBackground("white")

7. Set the background color of the progress bar.

wavescrollbar.setBackground("black")

8. Set the gradients of the progress bar.

wavescrollbar.setGradient({
  colors: [
    "red",
    "blue"
  ]
})

9. Animate the progress bar when updating.

wavescrollbar.setAnimation()

10. Config the transition effect.

wavescrollbar.setTransition({
   duration: ".2s",
   delay: '0s',
   timing: "linear" // "ease" | "ease-in" | "ease-in-out" | "ease-out"
   
})