Skip to content

Add ability to pass in css class to spinner and bar - #178

Open
richarddavenport wants to merge 2 commits into
aitboudad:mainfrom
richarddavenport:main
Open

richarddavenport wants to merge 2 commits into
aitboudad:mainfrom
richarddavenport:main

Conversation

@richarddavenport

Copy link
Copy Markdown

Closes #141
Not sure what you'd like to call the inputs, feel free to change them.

@richarddavenport

richarddavenport commented Oct 24, 2020 •

Copy link
Copy Markdown
Author

I realized that the background was overwriting some styles in my css class, namely background-color. I'm guessing that most people are wanting to style it based on a class, so the loader probably shouldn't set background in that case. Also, my [ngClass] code was old and wrong, updated to work.

@aitboudad

Copy link
Copy Markdown
Owner

could you please update readme https://github.com/aitboudad/ngx-loading-bar#customize-ngx-loading-bar

@@ -6,12 +6,18 @@ import { LoadingBarService } from './loading-bar.service';
template: `
<ng-container *ngIf="value != null ? value : (value$ | async) as progress">
<div *ngIf="includeSpinner" class="ngx-spinner">

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

spinnerClass should be set here

@aitboudad

Copy link
Copy Markdown
Owner

I'm not sure if we do really need such inputs 🤔, to use scss variables just target the used classes ngx-spinner and ngx-bar. let me know WDYT?

@moberwasserlechner

Copy link
Copy Markdown

@aitboudad Thx for the hint.

Styling the loading bar with

.ngx-bar {
  background-color: mat-color($accent) !important;
}

works great and I can use Angular Material Theming that way.

It did not work without the !important though as the fallback color is always set to element style.

@moberwasserlechner

Copy link
Copy Markdown

I have to revoke my previous comment. With proper Angluar 12 theming it does not work. This PR would be really great.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

@Input css Class

3 participants