A customisable loading spinner for Angular applications.
Table of contents
Check out the interactive demo on StackBlitz.
Install ngx-loading via NPM, using the command below.
npm install --save ngx-loading
NOTE: Version 3 of this package (latest) requires Angular 6 as a dependency. If you are using Angular 4 / 5, please install version 2.0.1:
npm install --save firstname.lastname@example.org
NgxLoadingModule in your root application module:
You must create a boolean variable (e.g.
loading below) that is accessible from the component which will contain ngx-loading. This boolean is used as an input into ngx-loading, and will determine when the loading spinner is visible.
Next, add the ngx-loading component selector to your application component's template. Set the
[show] input variable of ngx-loading to point to your boolean, which will determine when ngx-loading is visible. Optionally set the
[config] input variable of ngx-loading to setup custom configuration options. If the
[config] input variable is not set, the globally configured configuration will be used, if set. If no config options are set, the ngx-loading default config options will be used. See Config options for further information.
You can also optionally define a
[template] input variable, which can be used to inject your own custom templates into the component.
NOTE: ngx-loading will fill the entirety of its parent component. If you wish for ngx-loading to only fill a specific element within your component, ensure that ngx-loading is a child element of that element, and that the containing element has its
position attribute set to
|show||Required||A boolean, which will determine when ngx-loading is visible.|
|config||Optional||A set of configuration options for ngx-loading. If this is not specified, the globally configured configuration will be used, if set. If no config options are set, the ngx-loading default config options will be used. See Config options.|
|template||Optional||A TemplateRef, which will be displayed within the ngx-loading component. Use this to inject your own custom templates into the component.|
|animationType||Optional||ngxLoadingAnimationTypes.threeBounce||The animation to be used within ngx-loading. Use the ngxLoadingAnimationTypes constant to select valid options.|
|backdropBorderRadius||Optional||0||The border-radius to be applied to the ngx-loading backdrop, e.g. '14px'.|
|backdropBackgroundColour||Optional||rgba(0, 0, 0, 0.3)||The background-color to be applied to the ngx-loading backdrop, e.g. 'rgba(255, 255, 255, 0.2)'.|
|fullScreenBackdrop||Optional||false||Set to true to make the backdrop full screen, with the loading animation centered in the middle of the screen.|
|primaryColour||Optional||#ffffff||The primary colour, which will be applied to the ngx-loading animation.|
|secondaryColour||Optional||#ffffff||The secondary colour, which will be applied to the ngx-loading animation (where appropriate).|
|tertiaryColour||Optional||#ffffff||The tertiary colour, which will be applied to the ngx-loading animation (where appropriate).|
Config options can be set globally (using the
.forRoot() module import statement), as well as being passed into each ngx-loading instance, if required. Config options that are passed into an ngx-loading element will override any custom global config options that have been set. A combination of the two can be used together if appropriate. If no config is set, the default ngx-loading config options will be used. Please see below for an example custom configuration setup, using both global and local configurations.