If your page is in need of a progress bar, you may be able to reduce the heavier files or optimize costly processes.
In fact, it’s not possible to use CSS for anything of the kind, just display fixed-duration animations. Even with Javascript and HTML, it is not possible to calculate the exact volume of data that has already been loaded from the total. In fact, that wouldn’t even be necessary, since the browser’s own progress bar fulfills this role.
If the page is heavy because of the amount of images, you can simulate something similar with Progress.js (page in English). This script displays a progress bar, calculated based on the images that have already been loaded.
Maybe you can adapt the script to display progress in an image, like a GIF, but at first it is a text box (customizable) with the value in percentage:
Another way to determine progress would be to place Javascript snippets in different parts of the page, which increment a global variable. For example:
porcentagem += 10; atualizarProgresso();
But this method is even more inaccurate than the previous one, since the code would be triggered as soon as the files were opened by the browser, not necessarily having their content fully loaded.
Independent of the progress bar, it is possible to hide the page while loading using a mask, such as jquery-loadmask (page in English):
Source: Stack Overflow Question in English