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

Overview

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

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 might also like...

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

tsParticles - TypeScript Particles A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready! Particles.js conver

Jan 4, 2023

Slide-element - A ~700 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().

slide-element A tiny, accessible, Promise-based, jQuery-reminiscent library for sliding elements with dynamic heights open & closed. To see it in acti

Dec 12, 2022

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

fullPage.js English | Español | Français | Pусский | 中文 | 한국어 Available for Vue, React and Angular. | 7Kb gziped | Created by @imac2 Demo online | Cod

Dec 30, 2022

WhatsApp-last-seen - When was it last seen and how long it was online.

WhatsApp-last-seen - When was it last seen and how long it was online.

WhatsApp-last-seen When was it last seen and how long it was online. Copy the javascript code and paste in the browser console after opening an inbox

Nov 8, 2022

Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Dec 30, 2022

⚡️The Fullstack React Framework — built on Next.js

⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

Jan 4, 2023

Transactional Inbox/Outbox pattern for Durable Objects

do-transactional-outbox One of the challenges that many event-driven systems face is the fact that they have to write to the database and send out an

Sep 27, 2022

Material Progress —Google Material Design Progress linear bar. By using CSS3 and vanilla JavaScript.

Material Progress —Google Material Design Progress linear bar. By using CSS3 and vanilla JavaScript.

MProgress.js Google Material Design Progress Linear bar. It uses CSS3 and vanilla JavaScript which doesn't depend on any other libraries. Types and pr

Nov 30, 2022

Adaptation of the popular mkdocs-material material design theme to the sphinx documentation system

Sphinx-Immaterial Theme This theme is an adaptation of the popular mkdocs-material theme for the Sphinx documentation tool. This theme is regularly ma

Jan 4, 2023

A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.

A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.

jQuery GRIDDER 1.4.2 ======= A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images. We have all

Nov 6, 2022

A jQuery plugin that creates a paneled-style menu (like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications).

#jPanelMenu ###Version 1.4.1 jPanelMenu is a jQuery plugin for easily creating and managing off-canvas content. Check out the demo (and documentation)

Dec 14, 2022

A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.

A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.

jQuery GRIDDER 1.4.2 ======= A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images. We have all

Nov 6, 2022

Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

Segment Effect Background image segment effect as seen on Filippo Bello's Portfolio. Article on Codrops Demo License Integrate or build upon it for fr

Nov 29, 2022

Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo

Dec 6, 2022

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

Thumbnail Grid with Expanding Preview A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Googl

Jan 4, 2023

A community-centric site like you've never seen before.

Kleptonix A community-centric site like you've never seen before. Overview This section will be updated when basic posting and account creation functi

Apr 19, 2022

Unfurl links into rich cards, as seen in places like Slack and Twitter

eleventy-plugin-unfurl Turn URLs into rich cards. Show a preview image, page title, description and other meta information all inside a neatly present

Dec 16, 2022

A frida script that can be used to find the public RSA key used in the native libakamaibmp.so shared library, seen in version 3.3.0 of Akamai BMP

A frida script that can be used to find the public RSA key used in the native libakamaibmp.so shared library, seen in version 3.3.0 of Akamai BMP

Akamai BMP - RSA/AES Frida Hook This Frida script can be used to find the public RSA key used in the encryption process in Akamai BMP 3.3.0. Since ver

Jan 8, 2023

A plugin starter for medusa pre-configured and using typescript

A plugin starter for medusa pre-configured and using typescript

Plugin starter (Typescript) Start to write your own plugin as quick as possible Getting started Installation git clone [email protected]:adrien2p/medusa-

Nov 9, 2022
Comments
  • Add Vanilla js version

    Add Vanilla js version

    This is a try to make a vanilla js version. I had to put your loader on a site that didn't use jQuery, and because the code was ready, i decided to send this PR. I don't know if you will like this, the code its a bit ugly.

    Anyway, tested in Chrome, Firefox and Opera. And this suppose to work in IE 9+

    The API is the same. The only difference is the way you call the main method:

    var preloader = materialPreloader(settingsObject);
    preloader.on();
    preloader.off();
    
    opened by luanmuniz 0
  • materialize.css class conflict

    materialize.css class conflict

    The classes used for colors have the same names as the ones in materialize.css. I think the custom colors should be set as !important, so that if the user sets a color, it will replace the !important colors set for the classes like yellow, blue, etc from materialize.css

    opened by artur99 0
  • Query - How to implement this inside a <div> element

    Query - How to implement this inside a

    Hello,

    Thank you for this awesome plugin. I am trying to implement this in a single page HTML5 app, i am unable to display this inside the app.

    How to show the animation inside a div element?.

    opened by vijayrajasekaran 2
Owner
Aaron Lumsden
Aaron Lumsden
Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation

Mladen Plavsic 334 Dec 11, 2022
A jquery plugin for CSS3 text animations.

Textillate.js v0.4.1 See a live demo here. Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations

Jordan Schroter 3.6k Jan 2, 2023
A simple and easy jQuery plugin for CSS animated page transitions.

Animsition A simple and easy jQuery plugin for CSS animated page transitions. Demo & Installation http://git.blivesta.com/animsition/ Development Inst

Yasuyuki Enomoto 3.8k Dec 17, 2022
fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

What is fakeLoader.js fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulat

João Pereira 721 Dec 6, 2022
Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin

Parallax.js Simple parallax scrolling implemented as a jQuery plugin. http://pixelcog.com/parallax.js/ Please also check our v2.0.0-alpha! We'd be hap

PixelCog Inc. 3.5k Dec 21, 2022
A jQuery plugin that assists scrolling and snaps to sections.

jQuery Scrollify A jQuery plugin that assists scrolling and snaps to sections. Touch optimised. Demo http://projects.lukehaas.me/scrollify. More examp

Luke Haas 1.8k Dec 29, 2022
Lightweight, simple to use jQuery plugin to animate SVG paths

jQuery DrawSVG This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using

Leonardo Santos 762 Dec 20, 2022
Switch your nav's design on the fly

Midnight A jQuery plugin that switches between multiple header designs as you scroll, so you always have a header that looks great with the content be

Aerolab 3.7k Dec 30, 2022
Super-smooth CSS3 transformations and transitions for jQuery

jQuery Transit Super-smooth CSS3 transformations and transitions for jQuery jQuery Transit is a plugin for to help you do CSS transformations and tran

Rico Sta. Cruz 7.4k Dec 23, 2022
Unobtrusive page transitions with jQuery.

smoothState.js smoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions. If the user's browse

Miguel Pérez 4.5k Dec 21, 2022