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).