A repository of over 1000 quality jQuery plugins

jQueryCards ♡ WPEngine

Your website deserves the fastest WordPress host on earth. (As does ours.)

Get 20% off your hosting on us.

jQuery Material Preloader

Material Preloader is a jQuery Loading plugin.

Created by Aarondo

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

Not what you're looking for? Click here to view more Loading jQuery plugins

Material Design Preloader!s

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

materialPreloader.js

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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></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
    });

</script>

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

 preloader.on();
 preloader.off();

materialPreloader Options

OptionRequiredDescriptionOptionsDefault
positionNoPosition to place the preloadertop/bottombottom
heightNoThe height of the preloader barany length5px
col_1NoColor 1 optionany color#159756
col_2NoColor 2 optionany color#da4733
col_3NoColor 3 optionany color#3b78e7
col_4NoColor 4 optionany color#fdba2c
fadeInNoSpeed in millisecondsany speed200
fadeOutNoSpeed in millisecondsany speed200

Browser Support

  • Chrome
  • Safari
  • Firefox
  • Not tested in IE


You might also like these other Loading jQuery Plugins

  • PreLoadMe, a lightweig...

    PreLoadMe is a lightweight preloader for any webcontent. Powered by jQuery and CSS it is fully responsive and will run […]

  • Lazyload Rails

    jQuery Lazy Load for Rails image_tag helpers

  • jQueryui Amd

    AMD-wrapped modules for jQuery UI for use in loaders like RequireJS