Loading screen Directive - AngularJS


/ Published in: JavaScript
Save to your folder(s)

HTML, CSS and AngularJS Directive for Showing loading screen during an Ajax call


Copy this code and paste it in your HTML
  1. //AngularJS
  2. .directive('loading', ['$http', function ($http)
  3. {
  4. return {
  5. restrict: 'A',
  6. link: function (scope, elm, attrs)
  7. {
  8. scope.isLoading = function () {
  9. return $http.pendingRequests.length > 0;
  10. };
  11. scope.$watch(scope.isLoading, function (v)
  12. {
  13. if (v) {
  14. elm.show();
  15. } else {
  16. elm.hide();
  17. }
  18. });
  19. }
  20. };
  21. }])
  22.  
  23. //CSS
  24. <style type="text/css">
  25.  
  26. .loading-screen {
  27. top:0;
  28. left:0;
  29. width:100%;
  30. height:100%;
  31. position: fixed;
  32. z-index: 20;
  33. background-color: #110C09;
  34. opacity: 0.5;
  35. filter: alpha(opacity=50);
  36.  
  37. }
  38. .loading-icon{
  39. margin-left: auto;
  40. margin-right: auto;
  41. margin-top: 21%;
  42. }
  43. .sk-wave {
  44. margin: 40px auto;
  45. width: 50px;
  46. height: 40px;
  47. text-align: center;
  48. font-size: 10px; }
  49. .sk-wave .sk-rect {
  50. background-color: #DE4197;
  51. height: 100%;
  52. width: 6px;
  53. display: inline-block;
  54. -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
  55. animation: sk-waveStretchDelay 1.2s infinite ease-in-out; }
  56. .sk-wave .sk-rect1 {
  57. -webkit-animation-delay: -1.2s;
  58. animation-delay: -1.2s; }
  59. .sk-wave .sk-rect2 {
  60. -webkit-animation-delay: -1.1s;
  61. animation-delay: -1.1s; }
  62. .sk-wave .sk-rect3 {
  63. -webkit-animation-delay: -1s;
  64. animation-delay: -1s; }
  65. .sk-wave .sk-rect4 {
  66. -webkit-animation-delay: -0.9s;
  67. animation-delay: -0.9s; }
  68. .sk-wave .sk-rect5 {
  69. -webkit-animation-delay: -0.8s;
  70. animation-delay: -0.8s; }
  71.  
  72. @-webkit-keyframes sk-waveStretchDelay {
  73. 0%, 40%, 100% {
  74. -webkit-transform: scaleY(0.4);
  75. transform: scaleY(0.4); }
  76. 20% {
  77. -webkit-transform: scaleY(1);
  78. transform: scaleY(1); } }
  79.  
  80. @keyframes sk-waveStretchDelay {
  81. 0%, 40%, 100% {
  82. -webkit-transform: scaleY(0.4);
  83. transform: scaleY(0.4); }
  84. 20% {
  85. -webkit-transform: scaleY(1);
  86. transform: scaleY(1); } }
  87.  
  88. </style>
  89.  
  90.  
  91.  
  92. //HTML
  93. <div data-loading class="loading-screen">
  94. <div class="loading-icon">
  95. <div class="sk-wave">
  96. <div class="sk-rect sk-rect1"></div>
  97. <div class="sk-rect sk-rect2"></div>
  98. <div class="sk-rect sk-rect3"></div>
  99. <div class="sk-rect sk-rect4"></div>
  100. <div class="sk-rect sk-rect5"></div>
  101. </div>
  102. </div>
  103. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.