Author: | ManzDev |
---|---|
Views Total: | 970 views |
Official Page: | Go to website |
Last Update: | January 6, 2020 |
License: | MIT |
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();