TRNSFR

A Transmit 4-inspired multi progress bar.

Demo

Simulate the upload of ten 1MB files.

Upload a Bunch of Files

Get

Github Zip Archive

Usage

LOL NO U

// TRNSFR needs to know how many files you have, and big they each are
// Normally you will get this info from your upload script (i.e. HTML5 files API, Plupload, Uploadify, SWFObject, etc...)
var files = [2048, 2048, 2048] // Three 2MB files

// Now let's initialise our TRNSFR bar with our files
var trnsfr = $('#progress').trnsfr(files)

// There are two ways to update the progress element
// By chunk:
uploader.onuploadevent = function(chunk_sent) {
  trnsfr.addData(chunk_sent)
}

// By total size:
uploader.onuploadevent = function(total_sent) {
  trnsfr.setData(total_sent)
}

Docs

TRNSFR is a UI element meant to be used in conjunction with your current upload script.

Options

There are a number of options that you can set globally on the TRNSFR class (via TRNSFR.options), and pass to instances. Options and their defaults:

container_class ( String )

Default: multi_progress
Class name applied to the container element.

progress_class ( String )

Default: progress
Class name applied to each of the progress elements.

file_class ( String )

Default: file_progress
Class name applied to the file progress element.

total_class ( String )

Default: total_progress
Class name applied to the total progress element.

Constructor

new TRNSFR( elements, files [, options] ) → TRNSFR
  1. elements (jQuery Object) – jQuery collection of elements to be used as sections.
  2. files (Array) – An array of each individual file size in bytes.
  3. options (Object) – Configuration object associated with the current instance. See the options section for more info.

Instantiate a new TRNSFR object for the win.

jQuery.fn.trnsfr( files [, options] ) → TRNSFR
  1. files (Array) – An array of each individual file size in bytes.
  2. options (Object) – Configuration object associated with the current instance. See the options section for more info.

Instantiate a new TRNSFR object on a jQuery object.

Instance Members

TRNSFR#addData( bytes ) → Undefined
  1. bytes (Number) – Amount of data to add.

Add a chunk of data to the total bytes loaded.

TRNSFR#setData( bytes ) → Undefined
  1. bytes (Number) – Amount of data to set.

Set the amount of total bytes loaded.

TRNSFR#total_sizeNumber

Total size (in bytes) of all the files.

TRNSFR#done_sizeNumber

Current amount of data transferred (in bytes).

TRNSFR#completeBoolean

Updated when the `done_size` has reached the `total_size`.

TRNSFR#optionsObject

Options used to initialise the instance.