3 years ago
4760 Views

HTML5 & jQuery Progress bar plugin : Percentage Loader

Written by
html5 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

[list underline=”1″]
  1. jQuery 1.4+
  2. Firefox 3.0+, Safari 4.0+, Chrome 7+, IE9+, Opera 9+
[/list][margin_15b]

(i.e any browser with reasonable canvas support)

Installation

[list underline=”1″]
  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
[/list][margin_15b]

Options include:

[list style=”1″ underline=”1″]
  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
[/list][margin_25b]
[button style=”1″ caption=”Demo ” link=”http://widgets.better2web.com/loader/”][/button]      [button  style=”4″ caption=”Download ” link=”https://bitbucket.org/Better2Web/jquery.percentageloader/get/75b8a74983b3.zip”][/button]      [button  style=”3″ caption=”Documentation ” link=”https://bitbucket.org/Better2Web/jquery.percentageloader/overview”][/button]

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

Comments to HTML5 & jQuery Progress bar plugin : Percentage Loader

Leave a Comment

Your email address will not be published. Required fields are marked *

Menu Title