Understanding AngularJS: Animating The In & Between Page Transitions

One thing I experienced about receiving the HTTP request in the background and waiting the response being loaded completely is that is a very bad experience. User doesn't have any idea if the page they access is actually loading or loaded already. Loading itself happens in seconds (that's long enough time to wait for) especially for cheap server like mine.

Angular Animate is another AngularJS module which create some classes (like ".ng-leave", ".ng-enter") based on the background activities status. Instead of use those classes only for create some css transitions, we can make more useful of these classes to notify user whether a page is being loading or completely loaded by using the css pseudo elements like:

ng-enter:before { 
      content: 'Please wait...'; 
      display: block; 
      position: fixed; 
      width: 100%; 
      height: 100%; 
      background: #000; 
      color: #fff; 
      font-size: 24px; 
      padding-top: 42px; 
}

For example, please visit: http://adistyanapitaloka.com