Get new jQuery plugins just once a week



December 9, 2014

A jQuery plugin for Material Design pre-loader.

Material Preloader is a jQuery plugin that recreates the Material Design pre-loader (as seen on inbox).

Created by Aaron Lumsden



Material Preloader jQuery plugin

design preloader

Material Design Preloader!s

A jQuery plugin that recreates the Material Design preloader (as seen on inbox).


I was fascinated when I first saw the preloader for Google's inbox website so I thought I'd recreate it and turn it into a plugin so that others can use it in their app or website.

How to use

Make sure you have jQuery included and include 'materialPreloader.js' after jQuery.

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="materialPreloader.js"></script>

You also need to include 'materialPreloader.css'.

<link rel="stylesheet" type="text/css" href="css/materialPreloader.css">

You can then instantiate the plugin along with its options (if required).

<script type="text/javascript">

 preloader = new $.materialPreloader({
        position: 'top',
        height: '5px',
        col_1: '#159756',
        col_2: '#da4733',
        col_3: '#3b78e7',
        col_4: '#fdba2c',
        fadeIn: 200,
        fadeOut: 200


You can then call the following functions to turn the preloader on & off


materialPreloader Options

Option Required Description Options Default
position No Position to place the preloader top/bottom bottom
height No The height of the preloader bar any length 5px
col_1 No Color 1 option any color #159756
col_2 No Color 2 option any color #da4733
col_3 No Color 3 option any color #3b78e7
col_4 No Color 4 option any color #fdba2c
fadeIn No Speed in milliseconds any speed 200
fadeOut No Speed in milliseconds any speed 200

Browser Support


Related posts:

Bootstrap Star Rating
Material Preloader jQuery plugin

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever
Couple Gift Ideas