Ember Instagram Page Loader

components.ui-progress-bar.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Instagram Page Loader'
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('about');
});

export default Router;

routes.about.js

import Ember from 'ember';

const DELAY = function(milliseconds) {
  if (milliseconds === undefined) {
    milliseconds = 2000;
  }

  return new Em.RSVP.Promise(function(resolve) {
    Em.run.later(this, resolve, milliseconds);
  });
};

export default Ember.Route.extend({
  model() {
    return DELAY(2000).then(function() {
      return {
        name: 'Alex'
      };
    });
  }
});

routes.application.js

import Ember from 'ember';

const {
  getOwner,
  set,
  get
} = Ember;

export default Ember.Route.extend({
  actions: {
    loading() {
      this._showGlobalLoadingIndicator(...arguments);
    }
  },
  
  _showGlobalLoadingIndicator(transition) {
    let applicationController = getOwner(this).lookup('controller:application');

    if (!applicationController) {
      return;
    }

    set(applicationController, 'isLoading', true);

    transition.promise.finally(() => {
      set(applicationController, 'isLoading', false);
    });
    
    return true; 
  }
});

routes.index.js

import Ember from 'ember';

const DELAY = function(milliseconds) {
  if (milliseconds === undefined) {
    milliseconds = 2000;
  }

  return new Em.RSVP.Promise(function(resolve) {
    Em.run.later(this, resolve, milliseconds);
  });
};

export default Ember.Route.extend({
  model() {
    return DELAY(2000).then(function() {
      return {
        name: 'Alex'
      };
    });
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.gradient-animated {
  height: 3px;
  background: #27c4f5 linear-gradient(to right, #27c4f5, #a307ba, #fd8d32, #70c050, #27c4f5);
  background-size: 500%;
  animation: 2s linear infinite barprogress, 0.375s cubic-bezier(0.4, 0, 0.2, 1) grow, 0.3s fadein;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

@keyframes barprogress {
  0% {
    background-position: 0% 0;
  }
  to {
    background-position: 125% 0;
  }
}
@keyframes grow {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

templates.about.hbs

<p>About template</p>

templates.application.hbs

{{#if isLoading}}
  {{ui-progress-bar}}
{{/if}}
<h1>{{appName}}</h1>
<p><a href="https://www.effective-ember.com/blog/implementing-instagram-loading-with-ember">Blog post link</a></p>
<nav>
	{{#link-to 'index'}}Home{{/link-to}}
  {{#link-to 'about'}}About{{/link-to}}
</nav>
<br>
{{outlet}}

templates.components.ui-progress-bar.hbs

<div class="gradient-animated"></div>

templates.index.hbs

<p>Index template</p>

templates.loading.hbs

<h1>LOADING...</h1>

twiddle.json

{
  "version": "0.13.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2",
    "ember-cli-tachyons-shim": "4.9.1"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}