In its simplest form, I want to make a loading page like this website.
I want to use a custom SVG logo (that I have made in illustrator) and horizontally fill the logo as the page loads.
Like a SVG clip mask progress bar (or something).
Please, please help me!
Thanks, Jon
The simplest way to do this is with a gradient fill.
You just need to change the value of
offset
on both<stop>
elements to be the percentage you want - either 0->1 or "0%"->"100%". For example:An example function might be:
This approach works for any SVG element, whether it be text, as in the demo below, or a complicated logo made of paths.