A Progressbars Component
JavaScript Ruby
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
spec/javascripts
.gitignore
.jshintrc
CONTRIBUTING.md
Gemfile
Gemfile.lock
LICENSE
README.md
Rakefile
component.json
index.js
package.json

README.md

Ember-ProgressBars

This component generates progress bars that are compatible with Twitter-Bootstrap. It also includes an optional Ember.js view class.

Installation

With Bower:

  1. add "progressbars" to your project's component.json
  2. run bower install

Usage

Standalone

// Create a ProgressBar:
var progressBar = new ProgressBar();

// Add it to the DOM:
progressBar.el.appendTo( 'body' );

// Move the bar to 50%:
progressBar.update( 50 );

// We've encountered an error:
progressBar.status( 'error' );

This will result in

<div class="progress">
  <div class="bar bar-error" style="width: 50%;"></div>
</div>

With Ember

For examples, see this Fiddle. The simplest thing that will work:

<h3>Progress:</h3>
{{view Em.ProgressBars.Bar
       percentBinding="App.jobController.percentComplete"}}
<h3>Progress:</h3>
<div class="progress">
  <div class="bar" style="width: 48%;"></div>
</div>

To add classes to the .progress container element (like progress-striped or active), add them with classNames. The container will retain the .progress class.

{{view Em.ProgressBars.Bar classNames="progress-striped" ...}}
<div class="progress progress-striped">
  ...
</div>

Setting the "status" property on a Bar will cause the contained .bar element to gain the class .bar-{status}:

{{view Em.ProgressBars.Bar status="warning" ...}}
<div class="progress">
  <div class="bar bar-warning"...></div>
</div>