ng-loading-overlay is an Angular.js module to show customizable loading overlay.



  • load angular, ng-loading-overlay scripts in your index.html
  • add dependency to your app module var myAppModule = angular.module('loadingTest', ['ngLoadingOverlay']);
  • after that you can configure over $loadingOverlayConfigProvider and show/hide overlay with $loadingOverlay
  • you can call show it multiple times --> a counter gets increased --> you need to call hide as many times you call show!
  • the best --> you can use it to show only a backdrop or show something like a centered content

Configuration with $loadingOverlayConfigProvider

  • configure via defaultConfig(templateString, backgroundStyle, textColor)-Function
  • templateString: a html string (default: <b>Please wait</b>)
  • backgroundStyle: a css value for background-property (default: rgba(0, 0, 0, 0.5))
  • textColor: a css value for color-property (default: #fff)

Get Default with $loadingOverlayConfig

  • a provider you can inject in your app components
  • $loadingOverlayConfig.get():
    • return defaultConfig object

Show and hide with $loadingOverlay

  • a service you can inject in your app components
  • provides show()- and hide()-functions
  • $, backgroundStyle, textColor):
    • show overlay or changes overlay with optional parameters
    • increase open layers counter by 1
  • $loadingOverlay.hide():

    • decrease open layers counter by 1
    • hides overlay if counter gets 0


    • the overlay has the id ng-loading-overlay so you can animate ng-show and ng-hide
comments powered by Disqus
This page was last updated about 3 years ago.