Youtube-like Customizable Top Loader In JavaScript – pageload

Preview:

Description:

pageload is a small and dependency-free loading indicator library to create a Youtube-like loading bar on the top of the webpage.

More features:

• Fake mode.
• Fade animation.
• Shows a loading spinner with progress value while loading.
• Configurable delays.
• Custom colors & styles.
• Callback functions.

How to use it:

1. Install & import the pageload component.

# NPM
$ npm install @manz/pageload --save

import PageLoad from "@manz/pageload";

2. Or directly load the pageload in the HTML.

<script defer type="module">
  import PageLoad from "./lib/pageload.min.js";
</script>

3. Or from a CDN.

<script defer type="module">
  import PageLoad from "https://cdn.jsdelivr.net/npm/@manz/pageload/lib/pageload.min.js";
</script>

4. Start a fake page loader.

PageLoad.start({ 
  fakeMode: true 
});

5. Enable/disable the Automatic mode. Default: true.

PageLoad.start({ 
  autoIncrement: true
});

6. Determine whether or not to fade in the page content until the loading progress is finished. Default: true.

PageLoad.start({ 
  fadeIn: true
});

7. Set the start value of the page loader. Default: 0.

PageLoad.start({ 
  value: 0
});

8. Set the height of the page loader. Default: 5px.

PageLoad.start({ 
  height: 10
});

9. Customize the animation.

PageLoad.start({ 
  incrementValue: 1,
  incrementDelay: 100,
  transitionDelay: 500,
  transitionType: "ease",
  endDelay: 250,
  removeDelay: 2000
});

10. Customize the colors & styles.

PageLoad.start({ 
  loadingBarClass: "loading-bar",
  backgroundColor: "#ddd",
  color: "#2047b4",
  enableShadow: false,
  shadowOptions: "0 -8px 8px 5px"
});

11. Customize the loading spinner.

PageLoad.start({ 
  spinBar: true,
  spinBarColor: "#18a",
  enableProgress: false
});

12. Event handlers.

PageLoad.start({ 
  onStart: () => {},
  onDOMLoaded: () => {},
  onEnd: () => {}
});

13. Go to a specific progress value

PageLoad.go(50);

14. End the page loader.

PageLoad.done();