Splash animation - creating a loading SVG image

[ferohers]

Hi everyone,

I was meddling with SVG format to see what can be done to make things more eye candy while loading heavy screens.

1. I created an animated SVG and it works but IE and Edge browsers dont support that. However, the first image appears on the screen.

2. Non animated SVG can be animated via css. (all browsers support that)
   https://codepen.io/anon/pen/ZabEyg?q=svg+rotate&limit=all&type=type-pens

here is a good example.

My question is -where should I add the additional css code?

[revant_one]

Have you tried this?

Build.json and custom CSS

I am trying to include some custom CSS to both the desk and to the website. I’ve forum post about creating a new app, adding a build.json file to the public folder. I’ve looked at frappe’s build.json and Im confused. I’ve looked over the tutorial on how to build an app, but I must have skipped over this part, and can not find it in the documentation. Can some one please explain, why and where to put my apps css. and the format of the build.json file. Especially the key value pairs in build…

Refer public/build.json of erpnext and frappe.

Also checkout
https://discuss.frappe.io

[ferohers]

checking it asap

[Helio_Jesus]

Hi,
How do you load the image? or you just created on the code?
I have one SVG image and would like to make it spin or rotate !!!

[ferohers]

Hi there,

sorry for the late reply. I am quite sick atm. SVG can be animated just like a gif. Or normal svg can be rotated via css file check the code on the first entry.

[System19]

There used to be a cool little dancing “frappe” svg that appeared when first setting up a site… I miss the little guy.