-
Notifications
You must be signed in to change notification settings - Fork 14
Throbbing canvas with style
aino/throbber.js
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
throbber.js -- Background: I needed a really nice looking spinner that works on top of images. Even though there are quite a few javascript solutions available, none of them looked the way I wanted. So I created my own. And it went pretty well, so I github'd and MIT'd it. Demo: http://aino.github.io/throbber.js/ Throbber uses canvas and animationFrame to create the animation and graphics. It does not fiddle with VML for IE, instead you can pass a fallback gif for all browsers that do not support canvas. It adjusts itself for retina resolutions. It’s a mere 1.2k gzipped & minified Install using Bower: bower install throbber.js Or just download the code. No dependencies. -- Usage: Creates a throbber with default settings, attaches it to the body and starts spinning: Throbber().appendTo( document.body ).start() Creates a 20x20 pixels throbber: var loader = Throbber(20); loader.start(); Creates a throbber with options: var loader = Throbber({ size:40, padding: 30 }); -- Methods: Throbber( opts ) // constructor - intializes a throbber and sets options .appendTo( element ) // appends the throbber to any html element .start() // starts spinning .stop() // stops spinning .toggle() // toggles spinning .configure( opts ) // sets options -- Options: size // diameter of loader rotationspeed // rotation speed (1-10) clockwise // direction, set to false for counter clockwise color // color of the spinner, can be any CSS compatible value fade // duration of fadein/out when calling .start() and .stop() fallback // a gif fallback for non-supported browsers (IE < 8) alpha // global alpha (0-1), can be defined using rgba color or as a single option fps // frames per second padding // diameter of clipped inner area strokewidth // width of the lines lines // number of lines (~size/2+4)