DEV Community

Discussion on: I made 100 CSS loaders for your next project

Collapse
 
programmer285 profile image
programmer285

Can I use progress bars and Javascript to make a preloader, basically I would get the percentage till the website would load completely and till that I would keep updating the loader, I know the result won't be beautiful, but will it get the job done?

Collapse
 
afif profile image
Temani Afif

yes you can, as you can see most of the progress rely on background-size going from 0% 0% to X 0%. All you have to do is to update the X until you reach the max value (the one I used in the keyframe)

Collapse
 
programmer285 profile image
programmer285

I have another question how do I center it ?

Thread Thread
 
afif profile image
Temani Afif

It depends on your HTML strucutre. Each loader is a single div so any centring method will work (flexbox, CSS grid, position:absolute, etc)

Collapse
 
programmer285 profile image
programmer285

Thank you, I appreciate your work a lot.

Collapse
 
ambesh51 profile image
Ambesh Sharma

Please let me know you ,
Please share the link if you already find something progress bar with percentage till the website would load completely

Some comments have been hidden by the post's author - find out more