AngularJs에서 스피너 로드
Rana Hasnain Khan
2024년2월15일
요청이 로드되는 동안 로딩 스피너를 추가하고 AngularJ에 데이터가 로드될 때 로더를 중지하는 방법을 소개합니다.
AngularJs에서 스피너 로드
로더는 사용자 친화적으로 만들고 사용자 인터페이스를 개선하기 위한 웹 응용 프로그램의 일부입니다. 로더는 데이터 가져오기가 더 오래 걸릴 때 표시되며, 빈 페이지를 표시하는 대신 로더를 표시하도록 선택합니다.
로더 애니메이션은 데이터가 로드되는 동안 사용자의 참여를 유지합니다. 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를 하나 더 만들고 loader-box 클래스가 있는 div와 ng-if 문으로 img 2개를 더 만듭니다. 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="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>
이미지를 추가했으면 2개의 버튼을 추가합니다. 하나는 이미지를 숨기고 다른 하나는 이미지를 로드합니다. 필요하지 않을 때 버튼을 숨기기 위해 ng-if 문을 사용할 것입니다.
예를 들어 load images 버튼은 이미지가 표시될 때 표시되지 않습니다. hide images 버튼은 이미지가 숨겨져 있으면 표시되지 않습니다.
이 버튼에는 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 동안 지연시킵니다.
2000ms 후에 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 요청에서 주로 사용되며 데이터가 로드될 때까지 빈 페이지를 표시하는 대신 로드 애니메이션을 사용하여 사용자의 참여를 유지하는 것이 가장 좋습니다.
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