Loading Pane Display in Web Application

1. Write the following style in your css file.

[code]

.page-loader {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
   background: rgba(64, 95, 96, 0.75);
    cursor: wait;
    display: block;
    z-index: 2000;
}
.item_loader {
    border-left: 10px solid #1189d8;
    border-radius: 50%;
    border-top: 10px solid #ecf1f6;
    border-right: 10px solid #ecf1f6;
    border-bottom: 10px solid #ecf1f6;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    position: fixed;
    bottom: 50%;
    left: 50%;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
[/code]

2. In your Html Page put the div at the top of the page.

[code]

[/code]

3. Create one scope in your JS file and set its value by Default false
[code]

$scope. loaderShow = true;

[/code]
4.  In your JavaScript Controller set the scope value true before calling your API and false after getting results from the API as shown below.
[code]

$scope. loaderShow = true;

httpService.get("api/Items/GetAllItems", null).then(

 function success(response) {

  $scope.items = response.data.output;

  $scope. loaderShow = false;

  }

else {

alert(response.data.message);

   $scope. loaderShow = false;

   }

[/code]
5. Your loader will looks like