Angular JS Loading Screen and Page Animation Example

Posted by


Creating a loading screen and page animations in your AngularJS application can provide a more polished and professional user experience. In this tutorial, we will walk through how to implement a loading screen and page animations using AngularJS and HTML.

Step 1: Set up the Project

First, make sure you have AngularJS installed in your project. You can download AngularJS from the official website (https://angularjs.org/) or include it in your project using a CDN.

Step 2: Create the Loading Screen

To create a loading screen, we will use a simple HTML structure and CSS styling. Create a new HTML file and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading Screen</title>
  <style>
    .loading {
      background: #333;
      color: #fff;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div class="loading">Loading...</div>
</body>
</html>

This code will display a simple loading screen with a black background and white text. You can customize the styling to match your application’s design.

Step 3: Create the Page Animation

To create a page animation, we will use AngularJS animations. Add the following code to your HTML file:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Animation</title>
  <style>
    .page {
      transition: opacity 0.5s;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-animate.min.js"></script>
  <script>
    angular.module('myApp', ['ngAnimate']);
  </script>
</head>
<body ng-controller="MainController">
  <div class="page" ng-show="isPageLoaded">
    <!-- Your page content goes here -->
    <h1>Welcome to my AngularJS App!</h1>
  </div>
</body>
</html>

In this code, we are using AngularJS animations to animate the page transition when the page is loaded. The ng-show directive is used to show or hide the page content based on the isPageLoaded variable in the controller.

Step 4: Implement loading functionality

Now, we need to create a controller in AngularJS to handle the loading functionality. Add the following code to your HTML file:

<script>
  angular.module('myApp').controller('MainController', function($scope, $timeout) {
    $scope.isPageLoaded = false;

    $timeout(function() {
      $scope.isPageLoaded = true;
    }, 2000); // Set a timeout to simulate loading delay (2 seconds)
  });
</script>

In this code, we are using the $timeout service to simulate a loading delay of 2 seconds. Once the timeout is complete, the isPageLoaded variable is set to true, and the page content will be displayed.

Step 5: Test the Application

Finally, open your HTML file in a web browser to test the loading screen and page animation. You should see the loading screen for 2 seconds before the page content is displayed with a fade-in animation.

Congratulations! You have successfully implemented a loading screen and page animations in your AngularJS application using HTML and CSS. Feel free to customize the design and functionality to meet your specific requirements.