how to use loading panel with angularjs - html

Question

I want to show the loading icon(spinner) when I hit the button the request is going from controller to server. It will take some time to respond mean while, I need to show any loading icon. Once the server respond to the controller I just want to disable the loading icon.
Html:
<div class="modal-content" style="margin-top:135px">
<div class="modal-header">
<h4 class="modal-title pull-left"> Add New Role</h4>
<button type="button" class="close pull-right"
data-dismiss="modal" aria-hidden="true" title="Close">
x
</button>
</div>
<div class="modal-body">
<div class="row" style="margin-bottom:1%">
<div class="col-xs-3">
<h6><strong>Role<span style="color:green;">*</span></strong></h6>
</div>
<div class="col-xs-9">
<input type="text" required name="RoleName" placeholder="Role Name" onkeyup="convertToUppercase(this)"
class="form-control" ng-model="Role.RoleName" ng-change="verifyRoleDuplicate()" />
</div>
</div>
<div class="row" style="margin-bottom:1%">
<div class="col-xs-3">
<h6><strong> Description</strong></h6>
</div>
<div class="col-xs-9">
<textarea name="Description"
style="width: 100%; max-height: 200px; max-width: 100%;" ng-model="Role.Description" maxlength="255"></textarea>
</div>
</div>
<div class="row" style="margin-bottom:1%">
<div class="col-xs-3">
<h6><strong>IsActive?</strong></h6>
</div>
<div class="col-xs-9">
<input type="checkbox" name="IsActive" class="form-control" ng-model="Role.IsActive" style="width:20px;" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="AddRole()" ng-disabled="disableds || profileformAdd.$invalid" data-dismiss="modal" title="Save">Save</button>
<button class="btn btn-primary" data-dismiss="modal" title="Cancel" >Cancel</button>
</div>
</div>
controller:
$scope.AddRole = function ()
{
$http.post('/AddNewRole', $scope.Role).then(function (response) {
//console.log(response);
$notify.success('Success', "New Role" + " '" + $scope.Role.RoleName +"' " + "is inserted Successfully");
refresh();
$scope.Role='';
})
};
when I click the add button It will open the popup, Popup has two buttons if I click save button I want to display the loading icon. after save functionality completed It should hide the loading icon.

Answer 1

You can use css or svg loader for the same.
Simple Example of loader is given below.
Demo: http://codepen.io/sumitridhal/pen/gWWORr
HTML
<div class="container" ng-app="myApp">
<div ng-controller="myController">
Button
<div class="loader loader--style1" title="0" ng-if="load">
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
<path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 20 20"
to="360 20 20"
dur="0.5s"
repeatCount="indefinite"/>
</path>
</svg>
</div>
</div>
</div>
CSS
body{
padding: 1em;
background: #2B3134;
color: #777;
text-align: center;
font-family: "Gill sans", sans-serif;
width: 80%;
margin: 0 auto;
}
h1{
margin: 1em 0;
border-bottom: 1px dashed;
padding-bottom: 1em;
font-weight: lighter;
}
p{
font-style: italic;
}
.loader{
margin: 0 0 2em;
height: 100px;
width: 20%;
text-align: center;
padding: 1em;
margin: 0 auto 1em;
display: inline-block;
vertical-align: top;
}
/*
Set the color of the icon
*/
svg path,
svg rect{
fill: #FF6700;
}
JS
(function(){
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope, $timeout){
$scope.load = false;
$scope.toggle = function (){
$http.get(someUrl).success(function(){
$scope.load = true;
// Logic goes here
$scope.load = false;
}).error(function(){
$scope.load = true;
// Logic goes here
$scope.load = false;
})
}
});
})();