Splash animation - creating a loading SVG image

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?

2 Likes

Have you tried this?

Refer public/build.json of erpnext and frappe.

Also checkout

1 Like

checking it asap

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 !!!

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.

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

1 Like