Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

Custom data loading spinner?

Answered
Nataša Kunić asked on January 12, 2021

How to replace flexmonster data loading spinner with our custom spinner?

Attachments:
custom-spinner.png

4 answers

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster January 13, 2021

Hi Nataša,
 
Thank you for posting your question.
 
The default pivot table icons (spinner included) are stored as a font in the flexmonster-icons.ttf and flexmonster-icons.woff files inside the Flexmonster package (flexmonster/theme/assets/).
 
Therefore, we would suggest taking the following steps in case you need to change some of the default icons:
 

  1. Create copies of the previously mentioned ttf and woff files in the same directory (flexmonster/theme/assets/).
  2. Modify the created files as necessary.
  3. Inside the flexmonster.css file, modify the references to the ttf and woff files (line 297 as of version 2.8.24) so that they refer to your modified font files.

 
Once you do the above, clean the browser’s cache and reload the page where Flexmonster is embedded – your custom icons are now used instead of the default ones.
 
Please let us know if this helps.
 
Best regards,
Mykhailo

Public
Nataša Kunić January 13, 2021

Dear Mykhailo,
 
 thank you for your answer 🙂
What will happen to my custom icon and code after Flexmonster is updated, is it going to be erased?

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster January 14, 2021

Hi Nataša,
 
Thank you for pointing this out.
 
To ensure that your custom font files are not erased after the update, it is indeed better to place them outside the Flexmonster package together with the `flexmonster.css` file referring to them. 
 
In this case, you will also have to manually load the custom `flexmonster.css` file to the page, like this:

<link rel="stylesheet" type="text/css" href="<relative path to flexmonster.css here>" /> 

Hope this helps!
 
Kind regards,
Mykhailo

Public
Mykhailo Halaida Mykhailo Halaida Flexmonster 3 days ago

Hi Nataša,
 
How are you?
 
Just checking in to ask if you’ve found our suggestions above helpful. Have you managed to achieve the desired behavior?
 
We would be happy to hear your feedback.
 
Best regards,
Mykhailo

Please login or Register to Submit Answer