Mdb spinner showing as a big large circle fully colored insi


Topic: Mdb spinner showing as a big large circle fully colored inside

phani.sheela@gmail.com pro asked 4 years ago

Mdb spinner showing as a big large circle fully colored inside

Below is the code code copied and pasted


phani.sheela@gmail.com pro commented 4 years ago

simple plain mdb spinner is not working in my project

mdb version 4.1.0


Arkadiusz Idzikowski staff commented 4 years ago

@PHANI KUMAR SHEELA You didn't include any code, please update your post.

Do you use MDB jQuery library or MDB Angular?


PHANI KUMAR SHEELA pro commented 4 years ago

I am using MDB Angular


Arkadiusz Idzikowski staff commented 4 years ago

@PHANI KUMAR SHEELA Based on information from another topic, it seems to me that you have installed the version intended for jquery projects.

Please make sure that you use ng-uikit-pro-standard package and project configuration described here:

https://mdbootstrap.com/docs/angular/getting-started/quick-start/


PHANI KUMAR SHEELA pro commented 4 years ago

No I have installed the correct version of Products and using it, I only have issues with Preloader.

I am using ng-uikit-pro-standard

I have followed the instructions mentioned here https://mdbootstrap.com/docs/angular/getting-started/quick-start/


Arkadiusz Idzikowski staff commented 4 years ago

@PHANI KUMAR SHEELA which version of ng-uikit-pro-standard do you use? Please edit the first post and include the code that you used to render the spinner component, so we can reproduce this problem on our end.


akrolis pro commented 4 years ago

I have a similar issue.

After updating Angular from 10.2 to 11 and MDBAngular from 10.0.0 to 11.0.0 the mdb-spinner component doesn't show correctly.

Expected: enter image description here

Actual result: enter image description here

The code used is:

<mdb-spinner spinnerColor="blue"></mdb-spinner>

It still works ok for Angular 10.2 and MDBAngular 10.0.0.


Arkadiusz Idzikowski staff answered 4 years ago

I think we found the cause of the problem. As a workaround for now, please add these styles to the styles.scss file:

.preloader-wrapper {
  mdb-spinners {
    width: 100% !important;
    height: 100% !important;
    svg path {
      transition: stroke 0.3s;
      stroke-width: 6px !important;
      fill: transparent;
    }
    &[mode='indeterminate'] svg {
      animation-duration: 5332ms, 1333ms !important;
    }
  }
  mdb-spinners.spinner-blue-only svg path {
    stroke: #4285f4;
  }

  mdb-spinners.spinner-red-only svg path {
    stroke: #db4437;
  }

  mdb-spinners.spinner-yellow-only svg path {
    stroke: #f4b400;
  }

  mdb-spinners.spinner-green-only svg path {
    stroke: #0f9d58;
  }
}

akrolis pro commented 4 years ago

It works, thanks!

ps: btw, i'm trying to open a new topic on the Angullar support forum about a bug but keep getting a 406 Not Acceptable message.


Arkadiusz Idzikowski staff commented 4 years ago

@akrolis our forum should now work correctly. Please let us know if you have any further problems with starting a new topic.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.1.0
  • Device: Windows
  • Browser: every
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags