AngularJs でのスピナーの読み込み

Rana Hasnain Khan 2024年2月15日
AngularJs でのスピナーの読み込み

リクエストの読み込み中に読み込みスピナーを追加し、データが AngularJs に読み込まれるときにローダーを停止する方法を紹介します。

AngularJs でのスピナーの読み込み

ローダーは、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 を使用して見出しを作成します。その後、クラス loadImagesdiv を作成し、変数 images を使用する ng-if ステートメントを作成します。true に設定すると、画像が表示されます。false に設定すると、画像は非表示になります。

loadImagesdiv 内に、クラス img-box を含むもう 1つの div を作成し、クラス loader-boxng-if ステートメントを含む img を含むさらに 2つの div を作成します。変数 loadertrue の場合、loader-boxdiv のみが表示されます。

ローダーが false の場合、ローダーボックスを非表示にし、画像を表示します。loader-box 内に SVG ローダーアニメーションを作成し、imgdiv 内に画像を表示します。

作成した構造をコピーして、テンプレートに 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つのボタンを追加します。1つは画像を非表示にし、もう 1つは画像を読み込みます。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;
}

loaderimages という名前の Js ファイル内に 2つの変数を定義します。これらを ng-if ステートメントで使用し、画像の読み込み時に非表示にするには false に設定します。

ボタンの ng-click イベントで使用した関数を作成します。loadImages では、最初に loadertrue に設定し、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 の作業アニメーションにロードする

このようにして、AngularJs アプリケーションの任意の要素に読み込みアニメーションを設定できます。

ただし、ローダーアニメーションは、時間がかかることがあるため、主に HTTP リクエストで使用されます。データが読み込まれるまで空白のページを表示するのではなく、読み込みアニメーションを使用してユーザーの関心を維持することをお勧めします。

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

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