Where communities thrive

Join over 1.5M+ people
Join over 100K+ communities
Free without limits
Create your own community

Explore more communities

ngx-spinner/community

The community to discuss about ngx-spinner related issues/help.

People

Repo info

Activity

Yuvraj Chauhan

@Napster2210

to set*

@MarciaTobias

@MarciaTobias I've to check NX Console first. I've never used that before.

wagneribanez2

@wagneribanez2

Hi guys, good afternoon

I've installed ngx-spinner today, but it's not showing up

I would appreciate it if someone could lend a hand

I imported and exported NgxSpinnerModule on a Shared module

I also injected NgxSpinnerService on the component that I want to use it

wagneribanez2

@wagneribanez2

I used the code below, on my component's template

<ngx-spinner bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-scale-multiple" >
<p style="font-size: 20px; color: white">Loading...</p>
</ngx-spinner>

And used the methods show and hide on the component method I want to use it

wagneribanez2

@wagneribanez2

my package.json file

{
"name": "projetobase",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve ",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^8.2.3",
"@angular/cdk": "^8.1.3",
"@angular/common": "^8.2.14",
"@angular/compiler": "~8.2.3",
"@angular/core": "^8.2.14",
"@angular/forms": "~8.2.3",
"@angular/material": "^8.1.3",
"@angular/platform-browser": "~8.2.3",
"@angular/platform-browser-dynamic": "~8.2.3",
"@angular/router": "~8.2.3",
"@ng-bootstrap/ng-bootstrap": "^5.1.1",
"@ngrx/devtools": "^1.4.0",
"@ngrx/store": "^8.6.0",
"@ngrx/store-devtools": "^8.6.0",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"@sweetalert2/theme-dark": "^3.1.4",
"angular-hammer": "^2.2.0",
"angular-popper": "^2.0.1",
"angular2-text-mask": "^9.0.0",
"angular2-toaster": "^8.0.0",
"bootstrap": "^4.3.1",
"chart.js": "^2.8.0",
"compass-mixins": "^0.12.10",
"core-js": "^2.5.4",
"file-saver": "^2.0.2",
"highcharts": "^7.2.0",
"jquery": "^3.4.1",
"moment": "^2.25.3",
"ng2-charts": "^2.3.0",
"ngx-bootstrap": "^5.1.2",
"ngx-cookie-service": "^2.2.0",
"ngx-mask": "^8.1.5",
"ngx-material-timepicker": "^5.5.1",
"ngx-spinner": "^9.0.2",
"ngx-toastr": "^10.1.0",
"ngx-uploader": "^7.1.0",
"popper.js": "^1.15.0",
"rxjs": "~6.5.2",
"sweetalert2": "^8.19.0",
"tslib": "^1.9.0",
"vanilla-text-mask": "^5.1.1",
"xlsx": "^0.15.5",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.803.23",
"@angular/cli": "~8.3.0",
"@angular/compiler-cli": "~8.2.3",
"@angular/language-service": "~8.2.3",
"@fortawesome/fontawesome-free": "^5.10.2",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.5.3"
}
}

Shaik,Jilani

@jilanisk08_twitter

I have a angular ui which has 3 components , i used the ngx-serve in one of the component but the entire page gets stopped and comes as getting loaded
i did use [fullScreen]="false" but no luck

i am also facing this issue

could you help on this to not loading on entire page

i want to load this spinner in card level, not on entire page

this.spinner.show('mySpinner', {
type: "ball-clip-rotate-pulse",
size: "medium",
bdColor: "rgba(0, 0, 0, 0.5)",
color: "white",
zIndex:9999,
fullScreen:false});

@Napster2210 - Please help me on this

aliahdab

@aliahdab

Hello friends,
I have question , Does NgxSpinner support Angular 9.1.3?

Yuvraj Chauhan

@Napster2210

@jilanisk08_twitter You have to set position: relative css property to the parent DOM element of ngx-spinner

@aliahdab Yes, it does.

wagneribanez2

@wagneribanez2

Hi guys. Any ideas that can help me?

msunkari

@msunkari

Hi team we have just updated our project to angular 8 and installed ngx-spinner 8.1.2, the spinner is coming but we are able to interact with the screen in the backdrop even when the spinner is still loading, eg the spinner is loading and in the background i can see tool tip on hover of an element.. can u please suggest us how we can disable the interaction with the backdrop

msunkari

@msunkari

Also in v8.1.0 we are unable to apply custom template is that option not available in v8?

Yuvraj Chauhan

@Napster2210

@msunkari Currently that is not available in V8 but it'll be.

@wagneribanez2 Can you please create a sample Slackblitz so I can you through code.

wagneribanez2

@wagneribanez2

Hi @Napster2210 I had to use another solution. Thanks for your help anyway

Yuvraj Chauhan

@Napster2210

@wagneribanez2 I think the issue was with version of ngx-spinner. I saw you're using angular version 8, in that case you need to use ngx-spinner version 8 as well. By the way you find another solution great! 👍

venkatramarajup

@venkatramarajup

ngxspinner.hide() is not working in angular v9 can any one help me out??

venkatramarajup

@venkatramarajup

i wrote a .show() in one method and .hide() in one method , but in .ts file it will call both the methods , while doing that .show() is working fine but .hide() is not working the spinner is spinning continuously until we press the button . But i want it to hide automatically , can anyone help me out??

Yuvraj Chauhan

@Napster2210

@venkatramarajup Can you create a sample using stackblitz or codepen? So I can help you with the issue.

venkatramarajup

@venkatramarajup

@Napster2210 hey sorry i am unable to create it , and .hide() function is not working in angular 9

venkatramarajup

@venkatramarajup

@Napster2210 if we place spinner.hide() in subscribe , will it work? and spinner.show() before subscribing? my angular version is 9

Yuvraj Chauhan

@Napster2210

Hello guys!!!! Latest version v10.0.0 is now available.

https://www.npmjs.com/package/ngx-spinner

Yuvraj Chauhan

@Napster2210

10.0.1 is released with minor dependency warning fix.

Björn Kimminich

@bkimminich

Hi all! I'm happily using ngx-spinner in the OWASP Juice Shop (https://owasp-juice.shop) project for a long time to make the wait time on a slow loading component (https://github.com/bkimminich/juice-shop/blob/master/frontend/src/app/score-board/score-board.component.ts) easier to bear. Work fine for the ngOnInit case of the entire component, because there I can hide the spinner at the end of the inner most subscribe() function. All good. Now: There are many filter options on the page and some take quite a long time until the page fully shows the updates. There I've got problems, because I can't find a proper place to hide the spinner after showing it e.g. when the user clicks one of the filter buttons. Hints are welcome. Demo 1: Go to http://preview.owasp-juice.shop/#/score-board (spinner working on initialization) - Demo 2: On the page click any of the two "Hide/Show all" buttons to see how rendering takes long on "Show all" without a spinner. There I'd really like to add one but can't find the right hook to hide it. Any hint or help welcome! (If you send a PR with a working solution, I'll happily send you a Juice Shop sticker pack! :smile:)

Yuvraj Chauhan

@Napster2210

@bkimminich I'll try your code and will let you know if I get something which can helpful for you.

Björn Kimminich

@bkimminich

😃👍

Rajitha Upasanka Kithuldeniya

@Kithuldeniya

As in the screen shot ngx-spinner takes considerable weight in bundle file, can we reduce that size ?

Yuvraj Chauhan

@Napster2210

@Kithuldeniya Currently it's taking large css file that's why the overall bundle size

I' m working on that part so there will be a lighter version in future.