CSS Ładowanie strony

Siemano, jestem w trakcie tworzenia pseudo strony powitalnej pod ts'a.

Póki co na stronie jest odtwarzany tylko teledysk, ale mniejsza o to.
Generalnie chciałbym uzyskać efekt ładowania się strony

http://jsfiddle.net/danielpietrasik/jdm2...ht/#Result

Tak jak jest w artykule, użyłem podanych css'ow, dodałem klase do indexu.
Niby wszystko pięknie, ale pasek ładowania znika w zasadzie od razu.

Zmieniłem animation: animation 1.4s infinite linear;
na             animation: animation 5s infinite linear;

Lecz "kręciołek" dalej znika od razu.
Po szybkiej zabawie z zbadaj element okazało się, że po usunięciu filmu kółko dalej jest.
A efekt ładowania jest tylko dla tego, że film nie zdążył się w pełni załadować.

Teraz moje pytanie.. Jak zrobić efekt takiego ładowania przez czas około 2s.

Link do "strony" - http://snowsb.xaa.pl/demo/

Pozdrawiam

Generalnie kółko jest cały czas, bo nic go nie kontroluje. A to że chowa się to sprawa elementu video który jest wyżej (z-index). Efekt którego oczekujesz można uzyskać na kilka sposobów, w CSS możesz np. dodać animacje pojawiania się i znikania. I wtedy do loadera dodasz animację znikania z opóźnieniem 2s a z kolei elementowi video dodasz animację pojawiania się również z opóźnieniem 2s.

Mógłbyś podać przykład jakby to miało wyglądac?

https://jsfiddle.net/ThreeG/bv7mjbm7/1/

Pięknie wytłumaczone z przykładami. Dziękuje ślicznie za pomoc!