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

jQuery Plugin For Page Transition Effects with A Page Loader - Harold Loader
File Size: 6.21 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.