JIYIK CN >

Current Location：Home > Learning > WEB FRONT-END > Angular >
Vue React JavaScript Angular CSS HTML

Loading spinner in AngularJs

Author：JIYIK Last Updated：2025/04/18 Views：

We will cover how to add a loading spinner while the request is loading and stop the loader while data is loading in AngularJs.

Loading spinner in AngularJs

Loaders are a part of web applications to make them user-friendly and improve the user interface. Loaders are displayed when data fetching takes longer, and we choose to display loaders instead of showing a blank page.

Loader animations keep users engaged while data is loading. We will go through an example showing 6 images and using a loader animation to delay the display of the images.

Let's create a new AngularJs application to see the directive examples.

First, we will scriptadd the AngularJs library using the <head> tag.

# AngularJs
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>

Now, we will ng-appdefine the AngularJs application using .

# AngularJs
<body ng-app="">
   ...
</body>

We'll h2create a title using . After that, we'll create a with class loadImagesand diva statement that will use the variable images; ng-ifif set to true, it will display the image. If set to false, the image will be hidden.

Within our loadImagesdiv we will create one more div with class img-box, within that we will create 2 more divs with classes and and loader-boxthe statement. The div will only be displayed if the variable is .imgng-ifloadertrueloader-box

If the loader is false, it hides the loader box and shows the image. In our loader-box, we'll create an SVG loader animation and inside our imgdiv, we'll show our image.

We will display 6 images in the template by duplicating the structure we just made. So our code will look like this.

# AngularJs
<div class="container" ng-app="myApp" ng-controller="Controller">

  <h2>Images Of Cat</h2>
<div ng-If="images == true" class="loadImages">
  <div class="img-box">
    <div ng-If="loader == true" class="loader-box">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;"
        width="200px"
        height="200px"
        viewBox="0 0 100 100"
        preserveAspectRatio="xMidYMid"
      >
        <circle
          cx="50"
          cy="50"
          r="0"
          fill="none"
          stroke="#e90c59"
          stroke-width="2"
        >
          <animate
            attributeName="r"
            repeatCount="indefinite"
            dur="1s"
            values="0;40"
            keyTimes="0;1"
            keySplines="0 0.2 0.8 1"
            calcMode="spline"
            begin="0s"
          ></animate>
          <animate
            attributeName="opacity"
            repeatCount="indefinite"
            dur="1s"
            values="1;0"
            keyTimes="0;1"
            keySplines="0.2 0 0.8 1"
            calcMode="spline"
            begin="0s"
          ></animate>
        </circle>
        <circle
          cx="50"
          cy="50"
          r="0"
          fill="none"
          stroke="#46dff0"
          stroke-width="2"
        >
          <animate
            attributeName="r"
            repeatCount="indefinite"
            dur="1s"
            values="0;40"
            keyTimes="0;1"
            keySplines="0 0.2 0.8 1"
            calcMode="spline"
            begin="-0.5s"
          ></animate>
          <animate
            attributeName="opacity"
            repeatCount="indefinite"
            dur="1s"
            values="1;0"
            keyTimes="0;1"
            keySplines="0.2 0 0.8 1"
            calcMode="spline"
            begin="-0.5s"
          ></animate>
        </circle>
      </svg>
    </div>
    <div ng-If="loader == false" class="img">
      <img
        src="https://images.pexels.com/photos/3777622/pexels-photo-3777622.jpeg?auto=compress&cs=tinysrgb&w=175&fit=crop&h=275&dpr=1"
        alt=""
      />
    </div>
  </div>
  <div class="img-box">
    <div ng-If="loader == true" class="loader-box">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;"
        width="200px"
        height="200px"
        viewBox="0 0 100 100"
        preserveAspectRatio="xMidYMid"
      >
        <circle
          cx="50"
          cy="50"
          r="0"
          fill="none"
          stroke="#e90c59"
          stroke-width="2"
        >
          <animate
            attributeName="r"
            repeatCount="indefinite"
            dur="1s"
            values="0;40"
            keyTimes="0;1"
            keySplines="0 0.2 0.8 1"
            calcMode="spline"
            begin="0s"
          ></animate>
          <animate
            attributeName="opacity"
            repeatCount="indefinite"
            dur="1s"
            values="1;0"
            keyTimes="0;1"
            keySplines="0.2 0 0.8 1"
            calcMode="spline"
            begin="0s"
          ></animate>
        </circle>
        <circle
          cx="50"
          cy="50"
          r="0"
          fill="none"
          stroke="#46dff0"
          stroke-width="2"
        >
          <animate
            attributeName="r"
            repeatCount="indefinite"
            dur="1s"
            values="0;40"
            keyTimes="0;1"
            keySplines="0 0.2 0.8 1"
            calcMode="spline"
            begin="-0.5s"
          ></animate>
          <animate
            attributeName="opacity"
            repeatCount="indefinite"
            dur="1s"
            values="1;0"
            keyTimes="0;1"
            keySplines="0.2 0 0.8 1"
            calcMode="spline"
            begin="-0.5s"
          ></animate>
        </circle>
      </svg>
    </div>
    <div ng-If="loader == false" class="img">
      <img
        src="https://images.pexels.com/photos/156321/pexels-photo-156321.jpeg?auto=compress&cs=tinysrgb&w=175&fit=crop&h=275&dpr=1"
        alt=""
      />
    </div>
  </div>
  <div class="img-box">
    <div ng-If="loader == true" class="loader-box">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;"
        width="200px"
        height="200px"
        viewBox="0 0 100 100"
        preserveAspectRatio="xMidYMid"
      >
        <circle
          cx="50"
          cy="50"
          r="0"
          fill="none"
          stroke="#e90c59"
          stroke-width="2"
        >
          <animate
            attributeName="r"
            repeatCount="indefinite"
            dur="1s"
            values="0;40"
            keyTimes="0;1"
            keySplines="0 0.2 0.8 1"
            calcMode="spline"
            begin="0s"
          ></animate>
          <animate
            attributeName="opacity"
            repeatCount="indefinite"
            dur="1s"
            values="1;0"
            keyTimes="0;1"
            keySplines="0.2 0 0.8 1"
            calcMode="spline"
            begin="0s"
          ></animate>
        </circle>
        <circle
          cx="50"
          cy="50"
          r="0"
          fill="none"
          stroke="#46dff0"
          stroke-width="2"
        >
          <animate
            attributeName="r"
            repeatCount="indefinite"
            dur="1s"
            values="0;40"
            keyTimes="0;1"
            keySplines="0 0.2 0.8 1"
            calcMode="spline"
            begin="-0.5s"
          ></animate>
          <animate
            attributeName="opacity"
            repeatCount="indefinite"
            dur="1s"
            values="1;0"
            keyTimes="0;1"
            keySplines="0.2 0 0.8 1"
            calcMode="spline"
            begin="-0.5s"
          ></animate>
        </circle>
      </svg>
    </div>
    <div ng-If="loader == false" class="img">
      <img
        src="https://images.pexels.com/photos/3054570/pexels-photo-3054570.jpeg?auto=compress&cs=tinysrgb&w=175&fit=crop&h=275&dpr=1"
        alt=""
      />
    </div>
  </div>
  <div class="img-box">
    <div ng-If="loader == true" class="loader-box">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;"
        width="200px"
        height="200px"
        viewBox="0 0 100 100"
        preserveAspectRatio="xMidYMid"
      >
        <circle
          cx="50"
          cy="50"
          r="0"
          fill="none"
          stroke="#e90c59"
          stroke-width="2"
        >
          <animate
            attributeName="r"
            repeatCount="indefinite"
            dur="1s"
            values="0;40"
            keyTimes="0;1"
            keySplines="0 0.2 0.8 1"
            calcMode="spline"
            begin="0s"
          ></animate>
          <animate
            attributeName="opacity"
            repeatCount="indefinite"
            dur="1s"
            values="1;0"
            keyTimes="0;1"
            keySplines="0.2 0 0.8 1"
            calcMode="spline"
            begin="0s"
          ></animate>
        </circle>
        <circle
          cx="50"
          cy="50"
          r="0"
          fill="none"
          stroke="#46dff0"
          stroke-width="2"
        >
          <animate
            attributeName="r"
            repeatCount="indefinite"
            dur="1s"
            values="0;40"
            keyTimes="0;1"
            keySplines="0 0.2 0.8 1"
            calcMode="spline"
            begin="-0.5s"
          ></animate>
          <animate
            attributeName="opacity"
            repeatCount="indefinite"
            dur="1s"
            values="1;0"
            keyTimes="0;1"
            keySplines="0.2 0 0.8 1"
            calcMode="spline"
            begin="-0.5s"
          ></animate>
        </circle>
      </svg>
    </div>
    <div ng-If="loader == false" class="img">
      <img
        src="https://images.pexels.com/photos/6869634/pexels-photo-6869634.jpeg?auto=compress&cs=tinysrgb&w=175&fit=crop&h=275&dpr=1"
        alt=""
      />
    </div>
  </div>
  <div class="img-box">
    <div ng-If="loader == true" class="loader-box">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;"
        width="200px"
        height="200px"
        viewBox="0 0 100 100"
        preserveAspectRatio="xMidYMid"
      >
        <circle
          cx="50"
          cy="50"
          r="0"
          fill="none"
          stroke="#e90c59"
          stroke-width="2"
        >
          <animate
            attributeName="r"
            repeatCount="indefinite"
            dur="1s"
            values="0;40"
            keyTimes="0;1"
            keySplines="0 0.2 0.8 1"
            calcMode="spline"
            begin="0s"
          ></animate>
          <animate
            attributeName="opacity"
            repeatCount="indefinite"
            dur="1s"
            values="1;0"
            keyTimes="0;1"
            keySplines="0.2 0 0.8 1"
            calcMode="spline"
            begin="0s"
          ></animate>
        </circle>
        <circle
          cx="50"
          cy="50"
          r="0"
          fill="none"
          stroke="#46dff0"
          stroke-width="2"
        >
          <animate
            attributeName="r"
            repeatCount="indefinite"
            dur="1s"
            values="0;40"
            keyTimes="0;1"
            keySplines="0 0.2 0.8 1"
            calcMode="spline"
            begin="-0.5s"
          ></animate>
          <animate
            attributeName="opacity"
            repeatCount="indefinite"
            dur="1s"
            values="1;0"
            keyTimes="0;1"
            keySplines="0.2 0 0.8 1"
            calcMode="spline"
            begin="-0.5s"
          ></animate>
        </circle>
      </svg>
    </div>
    <div ng-If="loader == false" class="img">
      <img
        src="https://images.pexels.com/photos/7149465/pexels-photo-7149465.jpeg?auto=compress&cs=tinysrgb&w=175&fit=crop&h=275&dpr=1"
        alt=""
      />
    </div>
  </div>
  <div class="img-box">
    <div ng-If="loader == true" class="loader-box">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;"
        width="200px"
        height="200px"
        viewBox="0 0 100 100"
        preserveAspectRatio="xMidYMid"
      >
        <circle
          cx="50"
          cy="50"
          r="0"
          fill="none"
          stroke="#e90c59"
          stroke-width="2"
        >
          <animate
            attributeName="r"
            repeatCount="indefinite"
            dur="1s"
            values="0;40"
            keyTimes="0;1"
            keySplines="0 0.2 0.8 1"
            calcMode="spline"
            begin="0s"
          ></animate>
          <animate
            attributeName="opacity"
            repeatCount="indefinite"
            dur="1s"
            values="1;0"
            keyTimes="0;1"
            keySplines="0.2 0 0.8 1"
            calcMode="spline"
            begin="0s"
          ></animate>
        </circle>
        <circle
          cx="50"
          cy="50"
          r="0"
          fill="none"
          stroke="#46dff0"
          stroke-width="2"
        >
          <animate
            attributeName="r"
            repeatCount="indefinite"
            dur="1s"
            values="0;40"
            keyTimes="0;1"
            keySplines="0 0.2 0.8 1"
            calcMode="spline"
            begin="-0.5s"
          ></animate>
          <animate
            attributeName="opacity"
            repeatCount="indefinite"
            dur="1s"
            values="1;0"
            keyTimes="0;1"
            keySplines="0.2 0 0.8 1"
            calcMode="spline"
            begin="-0.5s"
          ></animate>
        </circle>
      </svg>
    </div>
    <div ng-If="loader == false" class="img">
      <img
        src="https://images.pexels.com/photos/320014/pexels-photo-320014.jpeg?auto=compress&cs=tinysrgb&w=175&fit=crop&h=275&dpr=1"
        alt=""
      />
    </div>
  </div>
</div>

After adding the image, we will add 2 buttons, one to hide the image and one to load the image. We will use ng-ifthe statement to hide the buttons when they are not needed.

For example, when the image is shown, 加载图像the button will not be shown. When the image is hidden, 隐藏图像the button will not be shown.

These buttons will also have events loadImages()with and hideImages()functions respectively.ng-Click

<button ng-If="images == false" ng-click="loadImages()">
  Click to view Images
</button>
<button ng-If="images == true" ng-click="hideImages()">
  Click to hide Images
</button>
</div>

Let's write some CSS to organize our images and loaders. So our code in CSS will look like this.

p {
  font-family: Lato;
}
h2 {
  text-align: center;
}
.img-box {
  width: 31%;
  float: left;
  border: 1px solid black;
  margin-right: 5px;
  margin-bottom: 5px;
}
.img-box svg {
  width: 100%;
}
.img-box .img {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

We will define 2 variables in the file called and . We will use loaderthem in the statement and set them to false to hide when the image is loaded.imagesJsng-if

We'll create ng-clickthe function that we use in the button's event. In loadImages, we first loaderset to trueand create a setTimeoutfunction to delay the loader animation for 2000ms.

After 2000 milliseconds, we loaderchange the value of to falseand imagesset the value of to truedisplay the image with the loader animation.

Now, hideImages()inside the function, we will just imagesset the value of . So the code in falseour file will look like this.index.js

var myApp = angular.module('myApp', [])
.controller('Controller', function($scope){
  $scope.loader = false;
  $scope.images = false;
  $scope.loadImages = function(){
    $scope.loader = true;

  setTimeout(function () {
  $scope.$apply(function(){
      $scope.loader = false;
  });
  }, 2000);


    $scope.images = true;
  };
  $scope.hideImages = function(){
    $scope.images = false;
  };
});

In this way, we can set loading animation for any element in AngularJs application.

But loading animations are mainly used HTTP 请求because they sometimes take time and it is better to use loading animations to keep the user engaged rather than showing a blank page until the data is loaded.

Previous：Select an option in the Angular drop-down menu

Next：Enabling HTML5 mode in AngularJS

For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.

Article URL：

Related Articles

Enabling HTML5 mode in AngularJS

Publish Date：2025/04/18 Views：148 Category：Angular

This article will guide you through enabling HTML5 mode with deep linking on your AngularJS application. Using HTML5 mode in AngularJS $locationProvider.html5Mode pushState is a way to tell the browser that it needs to use HTML5 mode for UR

Select an option in the Angular drop-down menu

Publish Date：2025/04/18 Views：112 Category：Angular

We will cover how to set the selected option in an Angular dropdown, set the selected option from an array of options, and set the selected option if the options are dynamic in Angular. Setting the selected option in an Angular dropdown men

在 Angular 中上传文件

Publish Date：2023/04/14 Views：123 Category：Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条，并在上传完成时显示文件上传完成消息。

Scan to Read All Tech Tutorials

Social Media
  • https://www.github.com/onmpw
  • qq:1244347461

Recommended

Tags

Mysql Operating Vue HTML css Angular Matlab C Nodj VB Cpp TypeScript Go Java PHP Python PostgreSQL Mongodb redis git Docker Operating Sy Algorithm Network
Scan the Code
Easier Access Tutorial