How to change the colors of Material Design Preloader?

You can customize the colors by setting the `col_1` to `col_4` options in the configuration, as detailed in the README's options table. For example, use hex codes or color names to match your design.

Material Design Preloader vs. other jQuery loading plugins: which is better?

Material Design Preloader excels at replicating the specific Material Design animation with customization options, but for more features like progress bars or spinner types, other plugins like Spin.js might be more versatile. Consider if visual design or functionality is your priority.

How to make the preloader appear during AJAX requests?

Call `preloader.on()` before making an AJAX request and `preloader.off()` upon completion. You'll need to manually integrate this with your AJAX calls, as the plugin doesn't have built-in event handling for this.

Can I use Material Design Preloader without jQuery?

No, it's designed as a jQuery plugin and requires jQuery to function. If you're not using jQuery, you'd need to rewrite or find an alternative plugin or CSS-based solution.

Is Material Design Preloader mobile-friendly?

The README lists browser support for Chrome, Safari, and Firefox, but doesn't specify mobile testing. Since it uses CSS and jQuery, it should work on modern mobile browsers, but you may need to test for responsiveness.

How to adjust the preloader animation speed?

Use the `fadeIn` and `fadeOut` options in milliseconds to control the animation speed. For instance, setting them to 500 will make the fade effects slower, as explained in the configuration table.

Open-Awesome

Material-Preloader

CSS

A jQuery plugin that recreates the Material Design preloader animation seen in Google's Inbox.

GitHub

362 stars73 forks0 contributors

What is Material-Preloader?

Material Design Preloader is a jQuery plugin that recreates the animated multi-color loading bar from Google's Material Design, specifically as seen in the Inbox application. It provides a visually appealing way to indicate loading states in web projects with customizable colors, position, and animation speed.

Target Audience

Frontend developers and web designers building websites or web applications who want to implement Material Design-inspired loading indicators.

Value Proposition

It offers an easy-to-integrate, customizable solution for adding the distinctive Material Design preloader animation without requiring complex custom code or design work.

Overview

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

Use Cases

Best For

Adding Material Design loading animations to jQuery-based websites
Creating visually engaging loading states for single-page applications
Enhancing user experience during AJAX requests or page transitions
Implementing customizable preloaders without writing CSS animations from scratch
Projects needing a lightweight loading indicator with minimal dependencies
Websites aiming for a Google Inbox-like visual aesthetic

Not Ideal For

Projects built with modern JavaScript frameworks like React or Vue.js, where native component libraries are preferred over jQuery plugins.
Applications requiring server-side rendering with minimal client-side JavaScript, as this preloader relies on jQuery and client-side execution.
Teams needing preloaders with built-in accessibility features, as the plugin documentation does not address ARIA roles or screen reader compatibility.
Environments where Internet Explorer support is critical, since the README explicitly states it has not been tested in IE.

Pros & Cons

Pros

Easy Integration

The plugin offers simple methods like `.on()` and `.off()` for controlling the preloader, making it straightforward to add to existing jQuery projects with minimal code, as shown in the usage examples.

Customizable Appearance

It allows detailed customization of colors, position, height, and animation speeds through options such as `col_1` to `col_4` and `fadeIn`, enabling visual alignment with various design schemes.

Distinctive Animation

It replicates the unique Material Design loading bar from Google Inbox, providing a polished and modern loading experience that enhances user engagement compared to generic spinners.

Lightweight Setup

With only a CSS file and a JS file required, plus minimal configuration, it's a lightweight solution for adding animated loading indicators without building custom animations from scratch.

Cons

jQuery Dependency

Being a jQuery plugin, it ties the project to jQuery, which can be a drawback for modern web development where jQuery usage is declining in favor of vanilla JavaScript or frameworks.

Limited Browser Support

The README admits it has not been tested in Internet Explorer, indicating potential compatibility issues with older browsers, making it risky for projects requiring broad browser coverage.

Basic Functionality

It only provides on/off functionality without features like progress tracking or seamless integration with AJAX libraries, limiting its usefulness in complex loading scenarios.

Frequently Asked Questions

Related Projects

material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.

Stars99,260

Forks32,496

Last commit1 day ago

material-design-icons

Material Design icons by Google (Material Symbols)

Stars54,141

Forks9,748

Last commit14 days ago

materialize

Materialize, a CSS Framework based on Material Design

Stars38,782

Forks4,585

Last commit2 months ago

fullPage

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

Stars35,373

Forks7,079

Last commit1 month ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub