Animated Top Progress Bar For Reading Progress – wavescrollbar

Category: Javascript | January 7, 2020
Author:yonicb
Views Total:278 views
Official Page:Go to website
Last Update:January 7, 2020
License:MIT

Preview:

Animated Top Progress Bar For Reading Progress – wavescrollbar

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"
   
})

You Might Be Interested In:


Leave a Reply