- Overview
- Documents
Material Design Preloader is a jQuery plugin that recreates the Material Design pre-loader
Browser Support
- Chrome
- Safari
- Firefox
- Not tested in IE
Source: github.com
Dec 02, 2014 in Animation 5976 views
Material Design Preloader is a jQuery plugin that recreates the Material Design pre-loader
Browser Support
Source: github.com
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" type="text/css" href="css/materialPreloader.css"> <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>
2. 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
preloader.on(); preloader.off();
3. 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 |
Tagged with:
material design preloader
jquery plugin
material preloader
pre-loader
seen on inbox
google's inbox
preloader
material design
Related Articles
JS Tutorial