Google Inbox Style Linear Preloader Plugin with jQuery and CSS3

A jQuery plugin that helps you create Material Design style animated linear loading/preloading bars as seen on Google Inbox.

How to use it:

1. Include jQuery library, materialPreloader.css and materialPreloader.js into your document.

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

<link rel="stylesheet" href="css/materialPreloader.css">
<script src="js/materialPreloader.js"></script>

2. Initialize the plugin to create an animated linear preloader on the top of the page.

preloader = new $.materialPreloader({
  // top or bottom
  position: 'top',

  // height of the preloader
  height: '5px',

  // colors
  col_1: '#159756',
  col_2: '#da4733',
  col_3: '#3b78e7',
  col_4: '#fdba2c',

  // fadeIn aniamtion speed
  fadeIn: 200,

  // fadeOut animation speed
  fadeOut: 200
});

preloader.on();

3. Public functions to turn the preloader on & off.

preloader = new $.materialPreloader({
  // OPTIONS
});

preloader.on();
// or preloader.off();

---

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