Javascript 如何在单击按钮时显示微调器或动画gif，直到显示消息？

从下面的代码中，我想显示加载微调器或任何动画gif，直到在超时时单击Submit按钮时显示myMessage。我怎样才能做到这一点，请让我知道，并提前感谢

Html:

---

.

以下是有效的代码。你只需要在字体图标上添加一个ng show或ng hide，然后调用相应的更改值

HTML

---

这里是指向的链接，以供演示，因为stackoverflow的代码段不支持指向font Aweasome的css链接。

很高兴为您提供帮助

<div ng-controller="Controller">
  <input type="text" id="inputId" ng-model="enteredMessage" 
autofocus/>
  <i class="fa fa-spinner fa-spin" style="font-size:24px"></i>
  <button type="button"  ng-click="myFunction(enteredMessage)">Submit</button>
  Entered: {{myMessage}}
</div>

var myApp = angular.module('myApp',[]);
  myApp.controller('Controller',['$scope','$timeout', function ($scope, $timeout) {
    $scope.myFunction = function(enteredTextMessage){
      $timeout(function() {
        //I need to show the spinner for three seconds until my myMessage loading/displaying complete 
        $scope.myMessage = enteredTextMessage;
      }, 3000);
    }
  }
]);

<div ng-app='app' ng-controller='mainCtrl'>
<input type="text" id="inputId" ng-model="enteredMessage" 
autofocus/>
  <i class="fa fa-spinner fa-spin" style="font-size:24px" ng-show='showSpinner'></i>
  <button type="button"  ng-click="myFunction(enteredMessage)">Submit</button>
  Entered: {{myMessage}}
</div>

angular.module('app',[]).controller('mainCtrl', function($scope, $timeout){
    $scope.showSpinner = false;
    $scope.myFunction = function(enteredTextMessage){
      $timeout(function() {
        //I need to show the spinner for three seconds until my myMessage loading/displaying complete 
        $scope.showSpinner = false;
        $scope.myMessage = enteredTextMessage;
      }, 3000);
      $scope.showSpinner = true;
    }
})