CODEWITHSUNDEEP
javascriptangularjs
Wasim Shaikh
Wasim Shaikh

Reputation: 7030

How to add loading DIV for angular js application?

I have simple application with angularjs and while data load in background it shows blank page, after angular js complete loading the template then I can view the data. I want to add loading spinner while loading and once the loading complete then it should hide.

Almost 50-100 records, with images as well.

<ul id='example-messages' class='large-block-grid-1'>
        <li ng-repeat='msg in messages'>
          <!--<strong class='example-chat-username'>{{msg.startTime}}</strong>
          {{msg.endTime}} -->
          <h4><a ng-href="{{msg.offerUrl}}">{{msg.offerName}}</a></h4>


          <div class="row">
            <div class="medium-4 columns">
              <a ng-href="{{msg.offerUrl}}"><img src="image.jpg" /></a>
            </div>
            <div class="medium-8 columns">
              <h5><a ng-href="{{msg.offerUrl}}">{{msg.offerCondition}}</a></h5>
              <h6>{{msg.offerDescription}}</h6>
              <div class="row" style="padding-top:22px">
            <div class="medium-5 columns">
              <div class="alert-box success radius">{{msg.startTime}}</div>
            </div>

            <div class="medium-5 columns">
              <div class="alert-box warning radius">{{msg.endTime}}</div>
            </div>

          </div>
            </div>
        </div>
        </li>
  </ul>

Upvotes: 2

Views: 3360

Answers (3)

An Phan
An Phan

Reputation: 2568

This is exactred from one of my live Angular projects:

HTML (index.html):

<div ng-controller="MainCtrl">
  <div ng-cloak ng-show="loading" id="overlay">
    <div class="loader"></div>
  </div>
</div>

SCSS (basically just to keep the #overlay fixed on top of other layers, and have a nice animation applied to .loader):

#overlay {
  background: rgba(0,0,0,.85);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}


$colors:
  hsla(337, 84, 48, 0.75)
  hsla(160, 50, 48, 0.75)
  hsla(190, 61, 65, 0.75)
  hsla( 41, 82, 52, 0.75);
$size: 2.5em;
$thickness: 0.5em;

// Calculated variables.
$lat: ($size - $thickness) / 2;
$offset: $lat - $thickness;

.loader {
  position: relative;
  width: $size;
  height: $size;
  transform: rotate(165deg);

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: $thickness;
    height: $thickness;
    border-radius: $thickness / 2;
    transform: translate(-50%, -50%);
  }

  &:before {
    animation: before 2s infinite;
  }

  &:after {
    animation: after 2s infinite;
  }
}

Then of course, in the controllers, whenever you want to show or hide the loading indicator:

$scope.root.loading = true;
$scope.root.loading = false;

Upvotes: 2

harishr
harishr

Reputation: 18055

below are few links of loading indicator

angular-spinner or angular-sham-spinner

also read this BLOG which details on how the spinner works with angularjs

also if you want to implement it yourself, below code will get you started...

app.directive("spinner", function(){
return: {
restrict: 'E',
scope: {enable:"="},
template: <div class="spinner" ng-show="enable"><img src="content/spinner.gif"></div>
}
});

i havent tested the code but directive wont be more complex than this...

Upvotes: 1

Muhammad Reda
Muhammad Reda

Reputation: 27023

You can add a scope boolean variable with value set to false, and change the value to true in your http promise success.

JS code sample:

function myController($scope, YourDataServer) {
    $scope.dataLoaded = false;

    YourDataServer
        .query()
        .$promise
        .then(
            function(result) {
                $scope.dataLoaded = true; // set the value to true
            });
}

HTML would look like:

<div id="loadingBar" ng-show="!dataLoaded">Loading...</div>

<div id="dataWrapper" ng-show="dataLoaded">
    <!-- data goes here -->
</div>

Upvotes: 1

Related Questions