Not sure about Chrome, but for Firefox you need an extension called Transparent Standalone Images because in Firefox transparency is normally only visible when the PNG appears on a web page with a background. It might be better instead to check your images in Photoshop or GIMP, where transparency is displayed using a chequered grid.
Another possible issue ...
I think You are going to use Adobe after effects, Also there was some watery effect which is a little tricky, but this video tutorial might help: https://www.youtube.com/watch?v=OR5BBKukRO8&ab_channel=ManueldoesMotion
This is far too late and may not be your problem, but for other people who might arrive here:
If you use SVG filters, the result will resemble a bitmapped image.
SVG filters work by rasterizing the SVG.
The most efficient method of animating something like a loading icon may be to create it with pure Cascading Style Sheets. There are no images to load and the http request is typically the same as when loading the basic page display.
Secondly, may be a small animated gif because the format supports animation and there's little to no overhead in terms of ...