Loader

Nice loader based in CSS3 transitions and animations

  Download   View project on Github

I always liked the Windows 8 / Window Phone loader. I think it fits very good in responsive designs so just added it to Stashy. The loader works using CSS3 transitions and animations so only modern browsers could show it properly.

Not required any HTML. The loader will be generated dynamically using JavaScript.

Constructor

Stashy.Loader(target)
Parameter Type Description
target string Select the element node where the loader will be appended to

Methods

Name Description
on(position,offset,color, insertiontype) Create and show the loader

position: Can choose "absolute", "relative", "fixed", "static"

offset: Offset from the chosen target (e.g. "20px" or "2em" ...)

color: Color you want to use (e.g. #000)

insertiontype: "prepend" for adding the loader like first child or "append" for last child

off() Destroy and hide the loader

Sample

var loader = Stashy.Loader("#page").on("relative","2em","#000","prepend");
loader.off();

Choose your options or leave defaults included and click the button for showing the loader

less

For using just this component, create a .less file similar to Stashy.less, include in order the following imports and compile:

Stashy.Variables.less Stashy.Mixins.less Stashy.Loader.less

JS

jQuery.js Stashy.Loader.js