Lightweight CSS loading animations to use when page loads. See it in action: http://viglino.github.io/css-page-loader/

The aim of this project is to create a set of minimal instruction to display loading spinners automatically on top of the page to hide the loading process.

The project also provide a collection of loading spinners animated with CSS.

A fixed div is created on top of the page (at a z-index of 10000) to mask the page when loading. Other elements are added to that div. CSS3 animations are used to animate them.

See in details "How TO - CSS Loader" on w3schools: http://www.w3schools.com/howto/howto_css_loader.asp

Place loading code on top of the body before other js codes.

<link rel="stylesheet" href="pageloader-loading.css" />
<script type="text/javascript" src="pageloader.js"></script>

The pageLoader object control the loading overlay.

After the page is loaded and all initialization scripts are run, you can hide the loading overlay:

pageLoader.hide();

If you need to show it again:

pageLoader.show();

To display information when loading:

pageLoader.info("Hello world!");

You can define the text to show when loading in the content of the .page-loader .loader

<style>
	.page-loader .loader p:before { content: "loading";	}
</style>

Use one of the CSS provided to get another transition or build your own one.

MIT License