Fake Progress Bar

components.fake-progress-bar.js

import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';

const {
  Component, get, set, computed, computed: { gte }
} = Ember;

const { floor } = Math;

export default Component.extend({
  classNames: ['progress-bar'],
  classNameBindings: ['showPercent:progress-bar-show-percent'],
  
  time: 10000,
  percent: 0,
  showPercent: true,
  showPercentMessage: 'Loading %@%',
  
  done: gte('percent', 100),
  
  percentMessage: computed('{percent,showPercent,showMessagePercent}', {
    get() {
      if (!(get(this, 'showPercent'))) {
        return null;
      }
      let message = get(this, 'showPercentMessage') || '';
      let percent = get(this, 'percent');
      return message.replace(/%@/g, percent);
    }
  }),
  
  styleWidth: computed('percent', {
    get() {
      let percent = get(this, 'percent');      
      return `width: ${percent}%`.htmlSafe();
    }
  }),
  
  updateProgress: task(function * () {
    let time = get(this, 'time');
    let percent = get(this, 'percent');
    let timeoutDelay = floor(time / 100);
    
    for (; percent <= 100; percent++) {
      yield timeout(timeoutDelay);
      set(this, 'percent', percent);
    }
  })
  .restartable()
  .on('didInsertElement')
});

controllers.application.js

import Ember from 'ember';

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

templates.application.hbs

<div class="hack container">
  <h1>Fake Progress Bar Example</h1>
  {{fake-progress-bar}}
</div>

templates.components.fake-progress-bar.hbs

<div class="progress-bar-filled" style={{styleWidth}} data-filled={{percentMessage}}></div>

twiddle.json

{
  "version": "0.11.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "hack_css": "https://cdnjs.cloudflare.com/ajax/libs/hack/0.7.7/hack.css",
    "ember": "2.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {
    "ember-concurrency": "0.7.19"
  }
}