There is no enough information about how to use &quot;Pr

Topic: There is no enough information about how to use "Preloading script"

Arsenii pro asked 6 years ago

That is, documentation shows "app.component.ts" file and completely unrelated "index.html". How to make it working?

Damian Gemza staff commented 6 years ago

Dear Arsenii, Few minutes ago I was trying to add preloading scripts, and for me, everything was okay. Add to your app.componen.ts preloader service and in onInit use stop() method from MDBSpinningPreloader service, and then in your index.html add preloader html markup. Best Regards, Damian

Arsenii pro commented 6 years ago

Dear Damian, please look into index.html code of Preloader script section. Unfortunately I have no idea how it can be realated to one white preloader (because it has four colored preloaders) and where should it be put in my index.html. I've tried a few variants (where to put it in real index.html) usring particulary that code and haven't seen any preloader on start. Regards, Arsenii

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear Arsenii,
There are only 5 colors of spinners: Red, blue, green, yellow and primary-color. If you want to use only 1 color, for example blue, you have to use this code in your index.html file:
<div>
<pre><div class="spinning-preloader-container">

</div>

</div>

</div></pre>
</div>
<div></div>
<div>You need to put this code after</div>
<div></div>
<pre><app-root></app-root></pre>
<div></div>
<div>selectors, and before first script tags.</div>
<div>In your app.component.ts file please use this code for timeout of loading your page:</div>
<pre></pre>
<div>
<div>
<pre>import { Component, OnInit } from '@angular/core';

import { MDBSpinningPreloader } from 'app/typescripts/pro';

@Component({

selector:'app-root',

templateUrl:'app.component.html',

styleUrls: ['app.component.css']

})

export class AppComponent implements OnInit {

constructor(privatemdbSpinningPreloader:MDBSpinningPreloader) {}

ngOnInit() {

setTimeout(() => {

this.mdbSpinningPreloader.stop();

}, 5000)

}

}</pre>
</div>
</div>
<div></div>
<div>Please note also, that you're able to use primary color of your skin with .primary-color-only class.</div>
<div>Best Regards,</div>
<div>Damian</div>

Please insert min. 20 characters.

Dear Arsenii, There are only 5 colors of spinners: Red, blue, green, yellow and primary-color. If you want to use only 1 color, for example blue, you have to use this code in your index.html file:

<div class="spinning-preloader-container">

<div class="preloader-wrapper big active">

<div class="spinner-layer spinner-blue-only">

<div class="circle-clipper left">

<div class="circle"></div>

</div>

<div class="gap-patch">

<div class="circle"></div>

</div>

</div>

</div>

</div>

You need to put this code after

<app-root></app-root>

selectors, and before first script tags.

In your app.component.ts file please use this code for timeout of loading your page:

import { Component, OnInit } from '@angular/core';

import { MDBSpinningPreloader } from 'app/typescripts/pro';

@Component({

selector:'app-root',

templateUrl:'app.component.html',

styleUrls: ['app.component.css']

})

export class AppComponent implements OnInit {

constructor(privatemdbSpinningPreloader:MDBSpinningPreloader) {}

ngOnInit() {

setTimeout(() => {

this.mdbSpinningPreloader.stop();

}, 5000)

}

}

Please note also, that you're able to use primary color of your skin with .primary-color-only class.

Best Regards,

Damian

Arsenii pro commented 6 years ago

Hello Damian, Thank you, the spinner works now. Please improve documentation of preloading script section for others to undertand this better too. The code itself looks very unrelated so I think I'm not the only one who can have problems in understanding where to put it and how to use (frankly speaking, I still don't understand the mentioned "primary color" class and how I can have white spinner as in example). Also I was very surprised to see possibility to create only four types of spinners. It would be better to have possibility to create spinners of all colors you provide for buttons (for example, I used elegant color scheme for one project and deep-purple for the other one, so for both these four spinners look not very related). Best Regards, Arsenii

Please insert min. 15 characters.

Damian Gemza staff commented 6 years ago

Dear Arsenii, About creating white spinner: Here's some workaround for this: https://mdbootstrap.com/support/customize-spinner-color/. Of course, we'll improve our preloader docs to put there more information how to use our preloaders in a live project. Also in future, we've got plans to improve our preloaders to give users a possibility to provide or custom color, or at least colors from our palette. Best Regards, Damian

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Arsenii

Pro User 69Support score
16Questions 5Answers 0Snippets