Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

richarddavenport
Copy link

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

@richarddavenport
Copy link
Author

richarddavenport commented Oct 24, 2020

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
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
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
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

@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

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

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