Allow to set the backdrop's background color

[krishnakumarp]

Is it possible to add the ability to set the backdrop's background color? I am using custom animated gif instead of spinkit. I would like this image not to have opacity, but would still like the keep the remaining background with opacity.

This will be possible if we keep opacity as 1 and use a background color like '#777777dd' on .backdrop. But this cannot be set at the moment and is hardcoded as $backdrop-background-color: #f1f1f1 !default; in _variables.scss

[mpalourdio]

Not possible at the moment in the component configuration. But doable in plain css, so not a show-stopper. Marking as feature request.

[krishnakumarp]

Thanks. Got it... I was able to achieve what I wanted using

#spinner.backdrop {
    background-color: #777777dd !important;
}

[mpalourdio]

Thanks for feedback, reopening the issue because interested in implementing the feature, that could be a nice addition.

[krishnakumarp]

What would it take to do this?

1. ng-http-loader.component.ts - @Input() public spinnerBackgroundColor!: string;
2. ng-http-loader.component.html - Add [style.backgroundColor]="spinnerBackgroundColor"

What more would you expect in a pull request?

[mpalourdio]

I would name it backdropBackgroundColor I think, with a default value (the same as in the scss file at the moment). Documentation should be updated, and tests should be added to ensure backward compatibility and prevent regression.

[krishnakumarp]

Do you need a default value? The default would come from ng-http-loader.component.scss?

[mpalourdio]

If it does not have a default value, it will override to empty the one in the scss file. So the value in the scss file should be completely replaced by the @Input

[krishnakumarp]

Then $backdrop-background-color should be removed from _variables.scss and its usage from ng-http-loader.component.scss ?

[mpalourdio]

yep

[mpalourdio]

v9.1.0 with this feature has just been published!