readline-js

Adding Readline

<script src="https://unpkg.com/readline-js/lib/readline-js.js"></script>
or Minified version
<script src="https://unpkg.com/readline-js/lib/readline-js.min.js"></script>
or 
npm i readline-js

Initializing ReadLine

 <script>
    //  Create it
let readline = new ReadLine({
    id:"target",
    showPercentage:true,
    height: "4px",
    color: "#00b8e6",
    zIndex:"50"
});
// Destroy it
readline.destroy()
</script>

With Reactjs

    import Readline from 'readline-js';
   useEffect(() => {

      let readline = new Readline({
        height: "3px",
        color: "red"
      })
      return ()=>{
        readline.destroy();
      }
  })

Props

target(optional): id of the targeted content / Default whole body

showPercentage(optional): show percentage of content covered. (slow in mobile)

height(optional): height of line / Default 6px

color(optional): color of line (rgb/rbga) / Default blue

zIndex(optional): sets the z-index for the readline. / Default 100

ChangeLog 7/Jan/2020

• Tar ball size reduced
• zIndex Customization added

ChangeLog 14/June/2020

• Added Destroy support.
• Can be used with Client Side Frameworks (React js etc).