在 AngularJs 中加载 spinner
Rana Hasnain Khan
2022年4月20日
我们将介绍如何在请求加载时添加加载 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 请求，因为它们有时需要时间，最好使用加载动画来保持用户参与，而不是在数据加载之前显示空白页面。
Author: Rana Hasnain Khan
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn