Customize "Grafana Loading"

Hi All,
I’m customizing Grafana. I have been sucessful changing icons and title. However I can’t find any documentation on customizing this page:
It seems like also the title is “Grafana”. Any help would be appreciated. :smiley:

I assume for the other customizations you’ve edited the code and then built from source - i.e. that you’re already familiar with that.

If you want to change the “title” here I think you can just look for “Loading Grafana” in the source tree and edit that.

The Grafana icon that appears on that page is stored as an SVG (possibly base64 encoded), IIRC in the same file that produces the “Loading Grafana” message. So if you want to change the icon you just need to replace that with your own image.

Finally, the animation is done via CSS, so you can change it by modifying the respective definition.

Hopefully that puts you on the right track. Let me know if you still end up stuck and I can try to look up the specifics.

1 Like

Thanks for your reply. I’ve used grep on /usr/share/grafana and found out that It was inside: /usr/share/grafana/public/views/.I’ve dig my way through index.html and customized it as well. Now I need to change the bouncing logo.However I couldn’t find loading logo location.Thanks for the nice tips :love_you_gesture:

I’ve configured background-image under .preloader-logo. I strongly recommend to use this site to edit svg file. Now it is all fine! :call_me_hand:

1 Like

Please share how to change image in .preloader-logo. my change reverted to default when I build project with yarn start

Hi I have just follow up question to edit this,

Is it need to convert the SVG to encoded?

Is the encoded code will be pasted on the .preloader__logo ?

the Ready for CSS?

Hoping for your kind response, thank you very much.

With kind regards,