Анимация загрузки страницы без использования JavaScript

Если у Вас есть приложение, загрузка которого занимает значительное количество времени, то было бы здорово установить заставку, чтобы немного оживить страницу и не дать загрустить пользователю. Часто, анимацию делают с помощью JavaScript, забывая, что CSS дает нам весьма широкие и более легковесные решения.

Привожу пример, который я использовал в одном из приложений. Код довольно простой, поэтому я не буду его комментировать. Я проверял этот код только в браузерах Chrome и FF последних версий, в IE данный код работать не должен. Если Вам не ясно почему transform: translate(-50%, -50%) используется в нескольких места, то попробуйте поиграть с этим правилом.

Идет загрузка…

А вот и сам исходник. Пользуйтесь на здоровье!

Leave a Reply

Your email address will not be published. Required fields are marked *