Sunday 27 April 2014

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


4 comments :

  1. Simple and easy...While there are libraries like angular-spinners this is good enough for most cases...

    ReplyDelete
  2. Hey Man your exampls are easy and simple. Tahanks for the post

    ReplyDelete
  3. This is great stuff. Thank you!

    ReplyDelete
  4. very simple and super

    ReplyDelete