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.

2

[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

2018-10-21_19-02-23

Leave a Reply

Your email address will not be published.