Se a sua página está precisando de uma barra de progresso, talvez seja possível reduzir os arquivos mais pesados ou otimizar processos custosos.
De fato, não é possível usar CSS para nada do tipo, apenas exibir animações de duração fixa. Mesmo com JavaScript e HTML, não é possível calcular o volume exato de dados que já foram carregados do total. Na verdade, isso nem seria necessário, já que a própria barra de progresso do navegador cumpre este papel.
Se a a página for pesada por causa da quantidade de imagens, dá para simular algo semelhante com Progress.js (página em inglês). Este script exibe uma barra de progresso, calculado com base nas imagens que já foram carregadas.
Talvez dê para adaptar o script para exibir progresso em uma imagem, como um GIF, mas a princípio é uma caixa de texto (customizável) com o valor em porcentagem:
Outra forma de determinar o progresso seria colocar trechos de JavaScript em diferentes partes da página, que incrementem uma variável global. Por exemplo:
porcentagem += 10; atualizarProgresso();
Mas este método é ainda mais impreciso que o anterior, já que o código seria disparado assim que os arquivos fossem abertos pelo navegador, não tendo necessariamente seu conteúdo carregado por completo.
Independente da barra de progresso, é possível ocultar a página durante o carregamento utilizando uma máscara, como jquery-loadmask (página em inglês):
Fonte: pergunta do Stack Overflow em inglês