Coding
posted by Maan

HTML5 & jQuery Progress bar plugin : Percentage Loader

HTML5 & jQuery Progress bar plugin : Percentage Loader

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

    1. jQuery 1.4+
    2. Firefox 3.0+, Safari 4.0+, Chrome 7+, IE9+, Opera 9+

(i.e any browser with reasonable canvas support)

Installation

    1. Include the javascript file (a minified version is also provided)
    2. 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
    3. Run $.percentageLoader on any block element where you want the widget to appear

Options include:

    1. progress (initial starting position of loader, range 0 – 1.0)
    2. value (initial label for the value)
    3. width (default 256)
    4. height (default 256)
    5. controllable (true/false, defaults to false) allows the user to set the value by clicking
    6. onProgressUpdate(value) – provide a callback function for controllable loaders with the updated value

Maan

21 year old designer, blogger and front-end developer. love to share creative design and inspiration.

comments powered by Disqus