Skip to content
A jQuery plugin that recreates the Material Design pre-loader (as seen on inbox).
CSS JavaScript HTML
Branch: master
Clone or download
Latest commit aff52ab Dec 22, 2015
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Add Vanilla version Dec 1, 2014
js Add Vanilla version Dec 1, 2014
.bower.json Rename bower.json to .bower.json Jan 13, 2015 Update Dec 22, 2015
index.html Create index.html Nov 28, 2014

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

  • Chrome
  • Safari
  • Firefox
  • Not tested in IE
You can’t perform that action at this time.