https://github.com/anupamkhosla/cssprogressbar
Smart progress bar showing how much a webpage has been loaded, only using css
https://github.com/anupamkhosla/cssprogressbar
loader page-loader progress-bar progressbar
Last synced: 3 months ago
JSON representation
Smart progress bar showing how much a webpage has been loaded, only using css
- Host: GitHub
- URL: https://github.com/anupamkhosla/cssprogressbar
- Owner: AnupamKhosla
- License: mit
- Created: 2022-09-23T03:00:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-09-23T11:53:14.000Z (over 2 years ago)
- Last Synced: 2025-01-16T06:58:09.262Z (5 months ago)
- Topics: loader, page-loader, progress-bar, progressbar
- Language: CSS
- Homepage: https://anupamkhosla.github.io/cssProgressBar/
- Size: 124 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# cssProgressBar
## https://anupamkhosla.github.io/cssProgressBar/
### Smart progress bar showing how much a webpage has been loaded, only using css and mininal javascript.
This code can be reused on any web project. The progress bar doesn't correspond to the real bytes downloaded by the webpage. This progress bar goes from 0 to 80% loaded in 2 seconds and then exponentially slows down it's speed. Then in the next 7 seconds it goes from 80 to 95 percent and waits for domContentLoaded to be fired. If domContentLoaded is fired at any instances from 0 to 10 seconds, then progress bar quickly(.3s) goes to 100%. For a real progress bar, you'd need the size of the page in bytes precalculated from server side and pass that information as text, then with js you can use performance api to get how many bytes have been downloaded at any instance.