https://github.com/aarondo/Material-Preloader

A jQuery plugin that recreates the Material Design pre-loader (as seen on inbox).
https://github.com/aarondo/Material-Preloader

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/aarondo/Material-Preloader
• Owner: aaronlumsden
• Created: 2014-11-28T13:59:11.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2017-05-09T17:03:55.000Z (over 7 years ago)
• Last Synced: 2024-05-19T05:30:34.278Z (6 months ago)
• Language: CSS
• Size: 12.7 KB
• Stars: 370
• Watchers: 29
• Forks: 78
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-material - Material-Preloader - loader (as seen on inbox). (Uncategorized / Uncategorized)

README

        
Material Design Preloader!s

=============

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

![materialPreloader.js](http://i60.tinypic.com/mj60lw.jpg)

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.

```js

```

You also need to include 'materialPreloader.css'.

```css

```

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

```js

 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

```js

 preloader.on();

 preloader.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