New Twiddle

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>

{{progress-bar pctWidth=150}}

<br>
<br>
{{outlet}}
<br>
<br>

progress-bar.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['progress-bar'],
  pctWidth:180,
  barStyle: Ember.computed("pctWidth",function(){
    return "width: "+Math.max(0,Math.min(100,this.get("pctWidth")))+"%";
    
  })
});

progress-bar.template.hbs

<div class="frame">
	<div class="bar" style={{barStyle}}>
	</div>
</div>

styles.app.css

.progress-bar .frame{
  border: 2px solid black;
	height:10px;
}

.progress-bar .bar{
  background-color:blue;
	height:10px;
  
}

twiddle.json

{
  "version": "0.4.14",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
  }
}