how to create a "preloader"
the title essentially says it all ^
this is my first time doing it, so i'm not sure where to start/what to do. to be specific, i really like the loading screen shown here with her name (can be replaced with a title) and a line (or some sort of unique squiggle): https://indiharris.webflow.io/
any help/suggestions on this is appreciated, thanks!
7 Replies
in this case there is a fixed overlay that fills op the screen and hides after a few seconds, exactly after those few seconds, the opacity of the rest changes from 0 to 1
ah, i see
how can i make the title and some squiggle similar to that?
the text is just placed in side a wrapper (with overflow hidden) and a transition rotates it to the original spot (makes it from going invisable to visable)
the line is a svg that scales the y-axis from 0 to 1
just dive into the source code and you'll see
ah okay
i'll check that out
thanks!
You could also animate a clip-path for that line. Gives you a little more control over the shape than a simple scale
hey, thanks! i'll keep that in mind when attempting that 🙂
It's what I did for the checkbox icons of my css library here if you want something for reference https://readycss.com/checkbox