Angular Loader using font awesome icons

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. You can improve the performance of your site by using font awesome images.
Click here to Download Font Awesome

Loading bar gives a better user experience .It is always better to show loading bars to users while doing saving or any other action it took some time. We can give very nice experience for users by using font awesome icons with angular js.

HTML

" fa fa-spinner fa-spin " are font awesome icon classes.

 

<button class="btn btn-primary">
 
 <span data-ng-hide="loading">
 Save 
 </span>
 
 <span data-ng-show="loading">
 Saving
 <i class="fa fa-spinner fa-spin"></i>
 </span>

</button>           

 
 

Controller

 

 //False on page load
 $scope.loading = false ; 

$scope.onSubmit = function(){

 $scope.loading = true ; 

}

After getting the success response from service (backend) change loader status to false.

Fiddle

Working Demo

Related Posts

1. Angular ng-repeate in directive

2. Loop concept in angular js

3. Angular js client side show more pagination

4. Show and Hide in angular

5. Simple client side sorting in angular