Laden von Spinner in AngularJs
Wir werden vorstellen, wie man einen Lade-Spinner hinzufügt, während die Anfrage geladen wird, und den Loader stoppt, wenn die Daten in AngularJs geladen werden.
Laden von Spinner in AngularJs
Loader sind ein Teil von Webanwendungen, um sie benutzerfreundlicher zu machen und die Benutzeroberfläche zu verbessern. Ladeprogramme werden angezeigt, wenn das Abrufen der Daten länger dauert, und anstatt eine leere Seite anzuzeigen, wählen wir die Anzeige eines Ladeprogramms.
Loader-Animationen sorgen dafür, dass die Benutzer beim Laden der Daten beschäftigt bleiben. Wir werden ein Beispiel durchgehen, in dem wir 6 Bilder anzeigen und eine Loader-Animation verwenden, um die Anzeige von Bildern zu verzögern.
Lassen Sie uns eine neue AngularJs-Anwendung erstellen, um ein Beispiel für Anweisungen durchzugehen.
Zuerst fügen wir die AngularJs-Bibliothek mit script-Tags hinzu.
# AngularJs
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
Jetzt definieren wir die Anwendung von AngularJ mit ng-app.
# AngularJs
<body ng-app="">
...
</body>
Wir erstellen eine Überschrift mit h2. Danach erstellen wir ein div mit der Klasse loadImages und der ng-if-Anweisung, die die Variable images verwendet; wenn es auf true gesetzt ist, werden Bilder angezeigt. Wenn es auf false gesetzt ist, werden Bilder ausgeblendet.
In unserem loadImages-Div erstellen wir ein weiteres Div mit den Klassen img-box, das zwei weitere div mit den Klassen loader-box und img mit ng-if-Anweisungen enthält. Nur das loader-box div wird angezeigt, wenn die Variable loader true ist.
Wenn der Loader false ist, blendet er die Loader-Box aus und zeigt Bilder an. In unserer loader-box erstellen wir eine SVG-Loader-Animation und in unserem img-Div zeigen wir unser Bild an.
Wir werden 6 Bilder in unserer Vorlage anzeigen, indem wir die gerade erstellte Struktur kopieren. Unser Code sieht also wie folgt aus.
# 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="https://www.w3.org/2000/svg"
xmlns:xlink="https://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="https://www.w3.org/2000/svg"
xmlns:xlink="https://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="https://www.w3.org/2000/svg"
xmlns:xlink="https://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="https://www.w3.org/2000/svg"
xmlns:xlink="https://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="https://www.w3.org/2000/svg"
xmlns:xlink="https://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="https://www.w3.org/2000/svg"
xmlns:xlink="https://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>
Sobald wir Bilder hinzugefügt haben, fügen wir 2 Schaltflächen hinzu, eine blendet die Bilder aus und eine lädt die Bilder. Wir werden die ng-if-Anweisung verwenden, um die Schaltflächen auszublenden, wenn sie nicht benötigt werden.
Beispielsweise wird die Schaltfläche load images nicht angezeigt, wenn die Bilder angezeigt werden. Die Schaltfläche hide images wird nicht angezeigt, wenn die Bilder ausgeblendet sind.
Diese Schaltflächen haben auch ng-Click-Ereignisse für die Funktionen loadImages() bzw. hideImages().
<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>
Lassen Sie uns etwas CSS schreiben, um unsere Bilder und unseren Loader zu organisieren. Unser Code in CSS sieht also wie folgt aus.
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;
}
Wir werden zwei Variablen in unserer Js-Datei mit den Namen loader und images definieren. Wir werden diese in ng-if-Anweisungen verwenden und sie auf false setzen, um sie beim Laden von Bildern auszublenden.
Wir werden die Funktionen, die wir im Ereignis ng-click verwendet haben, auf Schaltflächen erstellen. In loadImages setzen wir zuerst loader auf true und erstellen eine setTimeout-Funktion, um die Loader-Animation um 2000ms zu verzögern.
Nach 2000 ms ändern wir den Wert loader auf false und setzen den Wert von images auf true, um die Bilder mit einer Loader-Animation anzuzeigen.
Jetzt setzen wir in der Funktion hideImages() nur den Wert von images auf false. Der Code in unserer index.js-Datei sieht also wie folgt aus.
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;
};
});
Sie können den Code hier überprüfen.
Lassen Sie uns überprüfen, wie unsere Anwendung funktioniert.
Ausgabe:
Auf diese Weise können wir für jedes Element in unserer AngularJs-Anwendung eine Ladeanimation festlegen.
Aber Ladeanimationen werden meistens in HTTP-Anfragen verwendet, weil sie manchmal Zeit brauchen, und es ist am besten, Ladeanimationen zu verwenden, um den Benutzer zu beschäftigen, anstatt eine leere Seite anzuzeigen, bis die Daten geladen sind.
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