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>