Bitbucket is a code hosting site with unlimited public and private repositories. We're also free for small teams!

Close

jQuery.PercentageLoader

Introduction

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. For a live demo please see http://widgets.better2web.com/loader

Requirements

  • jQuery 1.4+
  • Firefox 3.0+, Safari 4.0+, Chrome 7+, IE9+, Opera 9+

(i.e any browser with reasonable canvas support)

Licence

This jQuery plugin is licensed under the Simplified BSD License. Please see the file license.txt for full information on the licence.

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:

  • 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

Examples:

$("#myDiv").percentageLoader({
    width : 180, height : 180, progress : 0.5, value : '512kb'});

You can update the values with .setProgress() and .setValue() functions, e.g.

var loader = $("#myDiv").percentageLoader();
loader.setValue('250kb');
loader.setProgress(0.5);

You can handle updates with a user-controllable loader with a callback function:

var loader;
loader = $("myDiv").percentageLoader({
    controllable : true,
    onProgressUpdate : function (value) {
        loader.setProgress(value * 100.0);
    }
});

Recent activity

Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.