Attributes of NgxUiLoaderComponent

4. Attributes of NgxUiLoaderComponent

You can configure ngx-ui-loader in the template as below:

Import the constant SPINNER from ngx-ui-loader in your controller. Then in your template:

<ngx-ui-loader fgsSize="75" [fgsType]="SPINNER.wanderingCubes"></ngx-ui-loader>

All attributes are listed below:

Attribute	Type	Required	Default	Description
bgsColor	string	optional	#00ACC1	Background spinner color
bgsOpacity	number	optional	0.5	Background spinner opacity
bgsPosition	string	optional	bottom-right	Background spinner postion. All available positions can be accessed via POSITION
bgsSize	number	optional	60	Background spinner size.
bgsTemplate	TemplateRef	optional	null	Custom template reference
bgsType	string	optional	ball-spin-clockwise	Background spinner type. All available types can be accessed via SPINNER
fgsColor	string	optional	#00ACC1	Foreground spinner color
fgsPosition	string	optional	center-center	Foreground spinner position. All available positions can be accessed via POSITION
fgsSize	number	optional	60	Foreground spinner size.
fgsTemplate	TemplateRef	optional	null	Custom template reference
fgsType	string	optional	ball-spin-clockwise	Foreground spinner type. All available types can be accessed via SPINNER
logoPosition	string	optional	center-center	Logo position. All available positions can be accessed via POSITION
logoSize	number	optional	120	Logo size (px)
logoUrl	string	optional	(empty string)	Logo url
pbColor	string	optional	#00ACC1	Progress bar color
pbDirection	string	optional	ltr	Progress bar direction. All direction types can be accessed via PB_DIRECTION
pbThickness	number	optional	3	Progress bar thickness
hasProgressBar	boolean	optional	true	Show the progress bar while loading foreground
text	string	optional	(empty string)	Loading text
textColor	string	optional	#FFFFFF	Loading text color
textPosition	string	optional	center-center	Loading text position. All available positions can be accessed via POSITION
gap	number	optional	24	The gap between logo, foreground spinner and text when their positions are center-center
loaderId	string	optional	master	The loader ID
overlayBorderRadius	string	optional	0	Overlay border radius
overlayColor	string	optional	rgba(40,40,40,.8)	Overlay background color