A jQuery plugin that utilises HTML canvas to show an animated percentage loader widget suitable for loading screens or displaying feedback during long-running tasks.
Introduction
Html5 & jQuery PercentageLoader is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. The plugin takes miniminal installation and is simple and flexibile to use. It makes use of HTML 5 canvas for a rich graphical appearance with only a 10kb (minified) javascript file necessary (suggested web font optional). It uses vectors rather than images so can be easily deployed at various sizes by simply adjusting the initial parameters.
Requirements
- jQuery 1.4+
- Firefox 3.0+, Safari 4.0+, Chrome 7+, IE9+, Opera 9+
(i.e any browser with reasonable canvas support)
Installation
- Include the javascript file (a minified version is also provided)
- You can also include the (optional but recommended web font) – Bebas Neue + fontkit CSS. This can found downloaded at http://www.fontsquirrel.com/fonts/bebas-neue
- Run $.percentageLoader on any block element where you want the widget to appear
Options include:
- progress (initial starting position of loader, range 0 – 1.0)
- value (initial label for the value)
- width (default 256)
- height (default 256)
- controllable (true/false, defaults to false) allows the user to set the value by clicking
- onProgressUpdate(value) - provide a callback function for controllable loaders with the updated value
[...] pie chart is a jQuery plugin that uses the html5 canvas element to render simple pie charts for single values. These chars are highly customizable [...]