AngularJS, bạn nói đấy? Ôi chào, chúng ta đang mê mẩn một bit nhỏ của quá khứ! Trong thế giới hiện đại ngập tràn Reacts, Vues, và Angulars mới, việc nhắc lại "thời kỳ đồ đá" của JavaScript frameworks có vẻ như chúng ta đang thực hiện một bộ phim điệp viên kỹ thuật số với các diễn viên đều từ thập kỷ 90 vậy!

Đùa chút thôi, nhưng nếu bạn vẫn đang sống trong kỷ nguyên AngularJS với những ngôi sao như $scope và ng-repeat, và bạn cần thực hiện một điệu nhảy "global loading dance" mỗi khi ứng dụng của bạn đang chuyển mình, cho phép tôi trở thành "DJ" cho bữa tiệc loading screen này.

Bước 1: CSS cho Loading Animation

Đầu tiên, bạn cần một chút "trang điểm" CSS để vũ điệu trở nên rực rỡ:

.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader {
  border: 5px solid #f3f3f3; /* Light grey */
  border-top: 5px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Bước 2: HTML cho Loading Element

Tiếp theo, thêm một đoạn HTML để tạo hiệu ứng loading vào trong file index.html của bạn:

<div class="loader-overlay" ng-if="isLoading">
  <div class="loader"></div>
</div>

Bước 3: Điều khiển Hiện/Ẩn với AngularJS

Giờ là lúc điều khiển chiếc "đĩa nhạc" này:

// Trong controller của bạn, hoặc lên một cái global controller nếu bạn muốn điệu nhảy này hoạt động mọi nơi.

app.controller('YourController', function($scope) {
  $scope.isLoading = false;

  $scope.showLoading = function() {
    $scope.isLoading = true;
    // Có thể bạn sẽ muốn nghe một vài điệu nhạc từ 'Moana' trong lúc này...
  };

  $scope.hideLoading = function() {
    $scope.isLoading = false;
    // ...và tạm biệt 'You're Welcome', animation đã kết thúc!
  };

  // Sử dụng $scope.showLoading() và $scope.hideLoading() ở những phần mà bạn muốn bắt đầu hoặc kết thúc loading animation.
});

Sao cảm thấy mờ mịt như sau một tối dài đọc docs không? Hãy giữ chuột không click đi đâu hết, vì giờ là lúc đặc biệt nhất: bạn đã sẵn sàng để thả dáng trên sàn nhảy của global loading animations. Nhưng này, nếu bạn cần một đôi giày mới để nhảy cùng những framework hiện đại, đừng ngần ngại ghé thăm trituenhantao.io, nơi chứa đầy ảo thuật của những bữa tiệc coding đỉnh cao và các tiệc tùng API không giới hạn, cùng những trò đùa thú vị mà không cần một từ để mô tả chúng!

Chúc bạn một bữa tiệc vui vẻ cùng loading animation!