Material design Loading component for angular

No additional dependecies like bootsrap or material or any other ui libs required

Angular versions support - 2,4,5,6,7+, 16+

Versions dependencies: Angular 2,4,5,6,7+ <=> 1.x version of library Angular 16+ <=> 16.x version of library

See Demo

Latest updates

22 January 2024 new Angular and Ts versions support
25 February 2020 Body template for replacing default spinner style
20 October 2019 Update demo link
11 October 2018 Additional attributes support (component colors and overlay opacity)
24 October 2018 Styles fix (fixed position for loading bar to be visible when page is scrolled down. overlay style fix for pages with scroll)
09 November 2018 configure z-index property support

Install

1. Install package with npm

npm install acdc-loading --save

2. Import loading module in your project's root module app.module.ts:

import { AcdcLoadingModule } from 'acdc-loading';

imports: [
    AcdcLoadingModule.forRoot()
]

Usage

1 Place loading tag in root component html markup app.component.html:

<acdc-loading 
	zIndex="1000000000"
	overlay="true" 
	overlayOpacity="0.1" 
	overlayColor="black" 
	spinnerColor1="red" 
	spinnerColor2="green">
</acdc-loading>

2. Alternative to step 1: Place loading tag in root component html markup app.component.html and provide body with custom loader style:

<acdc-loading 
    zIndex="1000000000"
    overlay="true" 
    overlayOpacity="0" 
    overlayColor="black" 
    spinnerColor1="#ccc" 
    spinnerColor2="white"
    useBody="true">
    <ng-container>
        <div class="busy-holder" style="z-index: 1000000000;">
            <div class="busy">
                <svg class="loader3 loader-md" viewBox="0 0 66 66">
                    <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
                </svg>
            </div>
        </div>
    </ng-container>
</acdc-loading>

Available attributes:
useBody - use body content as spinner instead default one
zIndex - overlay and spinner z-index
overlay - enable/disable overlay div for blocking screen while loading ( values - true / false )
overlayOpacity - overlay div opacity ( values - decimal number with range 0.0 .. 1.0 )
overlayColor - overlay div color ( values - one of these: Color Name / Hex Color Code / RGB Color Code )
spinnerColor1 - spinner animation first color ( values - one of these: Color Name / Hex Color Code / RGB Color Code )
spinnerColor2 - spinner animation second color ( values - one of these: Color Name / Hex Color Code / RGB Color Code )

3. Import and use loading service in any component or service where you need to control visibility of loading:

import { AcdcLoadingService } from 'acdc-loading';

constructor( private acdcLoadingService: AcdcLoadingService ) {}

anyMethod(){

	this.acdcLoadingService.showLoading();

	this.api.anyAsyncMethodCall().subscribe( res => {
		// some actions
		this.acdcLoadingService.hideLoading();
	});

	
}