Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
81 lines (78 sloc) 6.11 KB

MUX Loaders

is a library with AJAX loaders animated icons made with html+css and without any graphic files. It was tested on IE 7+, Firefos 3+, Opera 11, Safari, Chrome, Mobile Safari 4+ and Android 2.3. In some old browsers gradients and borders radius don't work - it's normal. In IE 9 borders radius doesn't work with gradient background too because of a bug (or feature) in IE - use solid color or loaders will be square.

You can see demo here http://lavmax.github.com/MUX.Loaders

All loaders depend only from MUX.Loader class and are independent from each other, so you can easily remove loaders you don't use from MUX.Loaders.js.

MUX.Loader

basic class that is not used by its own, but provides some basic options, properties and methods for loaders classes. It also provides animation garbage collector for lost elements.

Syntax

Syntax is common for all loaders until it is not described in loader's description. The syntax below is based on Bar subclass.

var loader = new MUX.Loader.Bar([options]);

Common Options

  • display - (string, defaults to block) CSS display value for visible loader.
  • delay - (int, default value differs for each loader and suits to loader's animation and size, if you change loader's size you should tune delay empirically) Delay in ms for the animation. The less delay the faster animation.
  • id - (string, optional) HTML element's id.
  • classes - (string, optional) HTML element's additional classes. Every loader has also class mux-loader.

Instance Properties

  • elem - Loader's HTML element.

Instance Methods

  • start() - Displays a loader and starts animation. This method is also available for elem property.
  • stop() - Stops animation and hides a loader. This method is also available for elem property.

General Examples

// Creating a simplest loader
var loader = new MUX.Loader.Bar();
loader.start(); // Starts and shows the loader
loader.stop(); // Stops and hides the loader

// You can also use start() and stop() for html element $('my-loaders-id').start(); $('my-loaders-id').stop();

// You can get loader's element using $ $(loader).inject(document.body); // is the same as loader.elem.inject(document.body);

MUX.Loader.Bar

Options

  • height - (int, defaults to 11) Height in pixels of loaders element.
  • width - (int, defaults to 180) Width in pixels of loaders element.
  • background - (string or array, default value is set to blue cross-browsers gradient) Background string CSS value. You can also set an array of background colors to have cross-browsers gradient.
  • color - (string, defaults to #fff) Main color. You can use only one color, transparent is not allowed.

MUX.Loader.Radar

Options

  • size - (int, defaults to 16) Height and width in pixels of loaders element.
  • overrun - (int, defaults to 20) Distance in pixels that strip runs over the element so loader has some delay before next animation starts.
  • background - (string or array, default value is set to blue cross-browsers gradient) Background string CSS value. You can also set an array of background colors to have cross-browsers gradient.
  • color - (string, defaults to #fff) Strip's color. You can use only one color, transparent is not allowed.

MUX.Loader.Well

Options

  • size - (int, defaults to 16) Height and width in pixels of loaders element.
  • mode - (string, allowed values are in and out, defaults to out) This loader can run from inside to outside and vice versa, so you can use this for instance for GET and POST AJAX requests.
  • background - (string or array, default value is set to blue cross-browsers gradient) Background string CSS value. You can also set an array of background colors to have cross-browsers gradient.
  • color - (string, defaults to #fff) Animated element's color. You can use only one color, transparent is not allowed.

MUX.Loader.Circles

Options

  • size - (int, defaults to 16) Height and width in pixels of loaders element.
  • mode - (string, allowed values are in and out, defaults to out) This loader can run from inside to outside and vice versa, so you can use this for instance for GET and POST AJAX requests.
  • background - (string or array, default value is set to blue cross-browsers gradient) Background string CSS value. You can also set an array of background colors to have cross-browsers gradient.
  • color - (string, defaults to #fff) Animated element's color. You can use only one color, transparent is not allowed.

MUX.Loader.Fb

Options

  • height - (int, defaults to 11) Height in pixels of loaders element. Width is calculated automatically to keep original Facebook proportions.
  • background - (string, defaults to #8C9EC3) Background CSS value for rectangulars.
  • borderColor - (string, defaults to #526FA7) Rectangulars border's color.