jQuery Plugin For Page Transition Effects with A Page Loader - Harold Loader

Harold Loader is a jQuery plugin that displays a customizable loading bar to indicate the page loading progress. Also has the ability to fade in your page as all the specific elements have been loaded. Without any CSS/CSS3 styles.

See also:

• Windows 8 Style Page Loader with CSS3 and jQuery

How to use it:

1. Load the jQuery Javascript library and the jQuery harold loader plugin at the end of the web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="harold-loader.js"></script>

2. Wrap the page content into a container element.

<div class="content">
...
</div>

3. Create an empty element to place the page loader.

<div class="harold-loader"></div>

4. Call the plugin on the target container.

$(function() {
$('.content').loader({
  loader: '.harold-loader'
});
});

5. Available options to customize the page loader.

$(function() {
$('.content').loader({
background: '#44AEE3', 
fadeSpeed: 200,
left: 0,
loader: '.progress',
padding: 2,
position: 'fixed',
top: 0,
width: $(window).width(),
padding: 2
});
});

Change log:

2014-09-25

• Refactored plugin so that loader will run when a anchor is clicked then send user to selected route.

---

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