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
MarkBoots
MarkBoots•2y ago
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
argbet
argbet•2y ago
ah, i see how can i make the title and some squiggle similar to that?
MarkBoots
MarkBoots•2y ago
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
argbet
argbet•2y ago
ah okay i'll check that out thanks!
StefanH
StefanH•2y ago
You could also animate a clip-path for that line. Gives you a little more control over the shape than a simple scale
argbet
argbet•2y ago
hey, thanks! i'll keep that in mind when attempting that 🙂
StefanH
StefanH•2y ago
It's what I did for the checkbox icons of my css library here if you want something for reference https://readycss.com/checkbox
Want results from more Discord servers?
Add your server