FunLoaderJs provides developers with a highly customizable progress bar that can be used in a variety of scenarios, from loading images to displaying user progress in a task!
There are a multitude of user interactivity features, designed to keep your users engaged and stuck on your website as you load your content in the background, such as a built in customizable clicker game!
Customize it to your liking to fit the theme of your website.
The documentation page was created using:
To get set up with the library, include the funloader.js script and funloader.css files in your webpage.
<!-- Example loading the stylesheet and script. Place in the <head> tag of your HTML -->
<link rel="stylesheet" href="funloader.css" />
<script type="text/javascript" type="module" src="funloader.js"></script>There are no external modules required to use this library.
Example code snippet for basic functionality.
// Create the loading bar
const pbar = new ProgressBar()
const progressBar = pbar.HTMLreference
// Adding the loading bar to the HTML DOM
document.querySelector('.progress-box').appendChild(progressBar)
// Adding 15% progress to the loading bar.
pbar.addProgress(15)
// Editing the look of the loading bar.
pbar.setProgressGradient(['#FFFFFF', '#FFFFFF'])
pbar.setOpacity(0.7)