What is the best way to implement loader animation when scripts and resources are loaded in Angular?
I want users of my web application to present a progress bar indicating the current progress of file and script uploads.
Percentage is preferred, but a simple gigabyte gif is an acceptable solution.
What is the best way to implement a loader that could show an indication of the percentage of loaded images, css and js in Angular, if at all possible?
I am thinking about having a small application whose sole purpose is to load resources and indicate progress, and when all scripts and resources are finished, fire some callback to load angular (angular.bootstrap ()).
I guess there are a bunch of smart guys out there who can come up with a better solution, and I hope and think more than I can benefit from some good advice regarding this.
It would also be nice to provide an approximate file size to fix the bootloader:
<script load-src="//somehost.com/file.js" filesize="100"/>
<img load-src=sprite.png" filesize="50"/>
source to share
Are you only talking about loading tags <script>
and tags <link>
etc? If so, you can use ng-cloak. Make everything hidden with ng-cloak CSS and make the counter shown by default. Then take out the counter when angular is fully loaded. more information about ng-cloak
If you mean loading the spinner until a set of your own HTTP requests are completed, you can use the angular-promise-tracker to track the HTTP requests and catch the "start" and "done" events to increase the percentage.
Here is an example of spinner load HTTP requests: http://plnkr.co/edit/SHtk7eSrbs1dfoQawPCW?p=preview
source to share
For the bare bone, a simple gif downloader:
HTML:
<div ng-show="displayLoadingIndicator" class="LoadingIndicator">
</div>
CSS
.LoadingIndicator {
display: block;
background: url(../img/loading.gif) center center no-repeat;
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}
JS controller:
function MyCtrl($scope, $http) {
$scope.displayLoadingIndicator = true;
$scope.loadStuff = function (serverResponse) {
// load my stuff
$scope.displayLoadingIndicator = false;
source to share