How to show a loading indicator when loading the app at the first time

javascript jquery css angularjs twitter-bootstrap

30,004

Solution 1

For Angular Apps use Angular Loading Bar. Looks like this.

Would apply to whenever an XHR request goes out in angular
Can specify which request to not display loading icon
Only displayed when the request causes user to wait
Can be styled to your liking
Injected into the services module and just works

Solution 2

I've used Pace.js before on a legacy project written almost entirely in Backbone.js, in which waiting for all the dependencies to resolve was pretty painful.

It's almost no configuration to get started, so if you're looking for a relatively simple library, I'd use that one.

Edit:

From the Docs:

Include pace.js and the theme css of your choice on your page (as early as is possible), and you're done!

Pace will automatically monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again!

If you use AMD or Browserify, require in pace.js and call pace.start() as early in the loading process as is possible.

Example

<head>
  <script src="/pace/pace.js"></script>
  <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>

30,004

Author by

Sn0opr

I'm a Fullstack Web developer, I'm currently working for an IT solutions company and studying Software Engineering in a Night School software engineering class. I love making things using web technologies like Laravel Framework, AngularJS and jQuery, also making hybrid mobile apps with Cordova/Ionic framework

Updated on July 09, 2022

Comments

Sn0opr almost 2 years

I have to load many files for my AngularJs single page application, like angular.js, jquery.js, bootstrap.js, bootstrap.css, some_plugins.js, my_main.js and others,

It take some time to load the entire app, so I want to show a loading indicator (a spinner for example) in a void page until all the js and css files load and then display the content.
Jason Swett about 9 years

I'll point out that Angular Loading Bar is good for ALL page loads, not necessarily just the first one.
Renato Carriço over 8 years

This is incredibly awesome. I'd give you +100 if I could.
Spock over 8 years

How can this be upvoted when it has nothing to do with the question? Angular Loading Bar and others require Angular to be initialized/bootstrapped, but the question is about pre-bootstrap animation. What am I missing?