Interactive Mini Game During Loading - loaderMiniGame

loaderMiniGame is a customizable jQuery loader plugin which displays an interactive mini game on the loading screen. The plugin will generate a red dot that moves around the loading indicator when mouse hovers and moves. Also can be implemented in pure JavaScript.

How to use it:

1. Load the loaderMiniGame plugin's script after you've load the latest jQuery JavaScript library.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery-loaderminigame.js"></script>

2. Call the plugin on the target container in which you want to generate the loader mini game.

$('.loaderContainer').loaderminigame();

3. To config the loader mini game, just override the values below and then pass them as an object to the loaderminigame() method.

$('.loaderContainer').loaderminigame({
  loaderBorderSize: "4px",
  loaderBorderColor: "#666",
  loaderOpenBorderColor: "transparent",
  loaderAnimationTimings: ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'],
  baseLoaderBorders: ['NE', 'SE', 'SW'],
  baseLoaderWidth: 20,
  baseLoaderHeight: 20,
  minLoaderSpeed: 1,
  maxLoaderSpeed: 3,
});

4. Standalone usage:

<script src="loaderminigame.js"></script>

// standalone usage
new loaderminigame(document.getElementById('byId'), {
    // options here
});

// Note: this just works on the first found match:
new loaderminigame($('.loader_test_2'), {
    // options here
});

 

---

This awesome jQuery plugin is developed by P0rnflake. For more Advanced Usages, please check the demo page or visit the official website.