How can I make a loading screen with a time

Answer 1

If you want a spinner, there is an example using Bootstrap 4 at:
https://www.w3schools.com/bootstrap4/bootstrap_spinners.asp

A spinner is the simplest thing to show while something loads.

If you want to show progress or estimated time to complete a task, that's a lot harder but still possible. Say you're waiting for some task to complete that takes a minute or two on the server such as 3D rendering something or making a video.
- You'd need to update that process to notify of progress updates once in a while to some shared memory such as an SQL database. This could be something like a percentage complete field in a record that corresponds with the background task.
- Create another API that retrieves the progress from that SQL database assuming that's where you put it.
- Call that progress/status API every couple seconds on your loading page using JavaScript.
- Visualize the status in the UI somehow. Maybe you show a progress percentage text or a progress element ( https://www.w3schools.com/tags/tag_progress.asp ).
- Then you're done and have your background progress showing in your browser.

Estimating time to complete a task without getting notifications from your background process can be very problematic because even the most consistently timed tasks can change when bandwidth changes, an operating system gets busier or less busy than usual, your hardware gets better or worse... if you can't get the background process to notify of its status, I recommend just having that spinner mentioned earlier because it is far simpler and won't lie to the user about how much time is remaining.

Answer 2

thanks