AmethystLoader

A simple JS library to add a loader on your website : until :

• Web fonts,
• Images,
• Background-images,

aren't loaded, the screen is white with an animated icon :

demo

Preview

Installation

<!-- Link the css sheet -->
<link rel="stylesheet" type="text/css" href="AmethystLoader/AmethystLoader.css" />


<!-- Link waitForImages -->
<script src="AmethystLoader/waitForImages/dist/jquery.waitforimages.min.js"></script>

<!-- Link fontFaceObserver -->
<script src="AmethystLoader/fontfaceobserver/fontfaceobserver.js"></script>

<!-- Link AmethystLoader script -->
<script src="AmethystLoader.js"></script>

Initialization

<!-- Initialize the Loader -->
<script type="text/javascript">
  AmethystLoader(icon_folder, icon);
</script>

Initialization example

<script>
  AmethystLoader("AmethystLoader/loaders/", "gears.svg");
</script>

Loaders bank

Visit loading.io to get some loaders !

Loaders in this repository

Add your loaders by make pull requests !

Loaders	File name
	orbs.svg
	gears.svg
	amethyst.svg