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.
Stashy.Loader(target)
Parameter | Type | Description |
---|---|---|
target | string | Select the element node where the loader will be appended to |
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 |
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.lessJS
jQuery.js Stashy.Loader.js