迹忆客 专注技术分享

当前位置：主页 > 学无止境 > WEB前端 > Angular >
Vue React JavaScript Angular CSS HTML

在 AngularJs 中加载 spinner

作者：迹忆客 最近更新：2023/04/14 浏览次数：

我们将介绍如何在请求加载时添加加载 spinner，并在 AngularJs 中加载数据时停止加载器。

在 AngularJs 中加载 spinner

加载程序是 Web 应用程序的一部分，以使它们对用户友好并改善用户界面。当数据获取时间较长时会显示加载器，我们选择显示加载器而不是显示空白页。

加载器动画在数据加载时让用户保持参与。我们将通过一个示例显示 6 张图像并使用加载器动画来延迟图像的显示。

让我们创建一个新的 AngularJs 应用程序来查看指令示例。

首先，我们将使用 script 标签添加 AngularJs 库。

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

现在，我们将使用 ng-app 定义 AngularJs 应用程序。

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

我们将使用 h2 创建一个标题。之后，我们将创建一个带有类 loadImages 的 div 和将使用变量 images 的 ng-if 语句；如果设置为 true，它将显示图像。如果设置为 false，图像将被隐藏。

在我们的 loadImages div 中，我们将再创建一个带有类 img-box 的 div，其中将再创建 2 个带有类 loader-box 和 img 的 div 以及 ng-if 语句。如果变量 loader 为 true，则仅显示 loader-box div。

如果加载器是 false，它会隐藏加载器框并显示图像。在我们的 loader-box 中，我们将创建一个 SVG 加载器动画，在我们的 img div 中，我们将显示我们的图像。

我们将通过复制我们刚刚制作的结构在模板中显示 6 张图像。所以我们的代码如下所示。

# 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>

添加图像后，我们将添加 2 个按钮，一个用于隐藏图像，一个用于加载图像。我们将使用 ng-if 语句在不需要时隐藏按钮。

例如，显示图像时不会显示加载图像按钮。当图像被隐藏时，隐藏图像按钮将不会显示。

这些按钮也将分别具有 loadImages() 和 hideImages() 函数的 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>

让我们编写一些 CSS 来组织我们的图像和加载器。所以我们在 CSS 中的代码将如下所示。

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;
}

我们将在名为 loader 和 images 的 Js 文件中定义 2 个变量。我们将在 ng-if 语句中使用它们并将它们设置为 false 以在加载图像时隐藏。

我们将创建我们在按钮的 ng-click 事件中使用的函数。在 loadImages 中，我们首先将 loader 设置为 true 并创建一个 setTimeout 函数来延迟加载器动画 2000ms。

2000 毫秒后，我们将 loader 的值更改为 false 并将 images 的值设置为 true 以显示带有加载器动画的图像。

现在，在 hideImages() 函数中，我们只会将 images 的值设置为 false。所以我们的 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;
  };
});

通过这种方式，我们可以为 AngularJs 应用程序中的任何元素设置加载动画。

但是加载动画主要用于 HTTP 请求，因为它们有时需要时间，最好使用加载动画来保持用户参与，而不是在数据加载之前显示空白页面。

上一篇：在 Angular 中显示和隐藏

下一篇：在 AngularJS 中启用 HTML5 模式

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

相关文章

在 Angular 中上传文件

发布时间：2023/04/14 浏览次数：71 分类：Angular

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

Angular 2 中的复选框双向数据绑定

发布时间：2023/04/14 浏览次数：139 分类：Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 Angular 中显示和隐藏

发布时间：2023/04/14 浏览次数：78 分类：Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时，我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间：2023/04/14 浏览次数：104 分类：Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

在 Angular 中拖放

发布时间：2023/04/14 浏览次数：105 分类：Angular

本教程演示了如何在 Angular 中使用拖放。我们将介绍@angular/cdk/drag-drop 模块来完成 angular 中的拖放。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

Mongodb Mysql C C语言 HTML Python Django 操作系统 Linux Matplotlib Java css Go Golang Matlab Docker Angular Javascript git C++ Cpp Vue PHP Nginx
扫码一下
查看教程更方便