AcdcLoading

This library was generated with Angular CLI version 16.2.0.

Code scaffolding

Run ng generate component component-name --project acdc-loading to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project acdc-loading.

Note: Don't forget to add --project acdc-loading or else it will be added to the default project in your angular.json file.

Build

Run ng build acdc-loading to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build acdc-loading, go to the dist folder cd dist/acdc-loading and run npm publish.

Running unit tests

Run ng test acdc-loading to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

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();
	});

	
}