Как работает прелоадер кота

Прелоадер с трансформирующимся котом имеет абсолютное позиционирование и появляется строго по центру соотношения сторон видимой области экрана или дисплея. Родительскому блочному элементу <div class="cat"> свойством animation: cat-transform 10s; устанавливается порядок поведения элемента через правило @keyframes cat-transform, и вот как это выглядит.

Общее время анимации выставлено на 10 секунд, правило @keyframes делит время поведения анимации в процентном соотношении на 4 этапа:

@keyframes cat-transform {
/* первый этап, до 10% от 10 секунд ширина и высота элемента равна 100 пикселям, квадрат */
 0% {
 width: 100px;
 height: 100px;
 }
/* второй этап, до 90% от 10 секунд ширина элемента равна 100 пикселям, высота увеличивается до 150 пикселей, бордюра нет */
 10% {
 width: 100px;
 height: 150px;
 border-radius: 0;
 }
/* третий этап, до 100% от 10 секунд ширина элемента равна 100 пикселям, высота 150 пикселей, бордюра нет */
 90% {
 width: 100px;
 height: 150px;
 border-radius: 0;
 }
/* четвёртый этап, финальное состояние где ширина и высота снова равна 100 пикселям, добавляется округление углов в 50% */
/* так квадратный элемент 100 на 100 с округлёнными углами в 50% превращается в круг */
 100% {
 width: 100px;
 height: 100px;
 border-radius: 50%;
 }
}

Внутри элемента <div class="cat"> содержатся вложенные блочные элементы со своими условиями поведения внутри основного блока. Можно изменять время поведения элемента для увеличения или сокращения трансформации кота в css свойствах.

Код прелоадера кота для установки

<style>
.cat {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100px;
 height: 100px;
 background: #d77d31;
 border-radius: 50%;
 animation: cat-transform 10s;
}

.cat .ear {
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 border-style: solid;
}

.cat .ear.left {
 top: 20px;
 left: 20px;
 border-width: 20px 0 0 20px;
 border-color: transparent transparent transparent #d77d31;
 animation: ear-transform-left 10s;
}

.cat .ear.right {
 top: 20px;
 right: 20px;
 border-style: solid;
 border-width: 0 0 20px 20px;
 border-color: transparent transparent #d77d31 transparent;
 animation: ear-transform-right 10s;
}

.cat .eye {
 position: absolute;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background: #333;
 z-index: 5;
}

.cat .eye.left {
 top: 25px;
 left: 25px;
 animation: eye-transform-left 8s;
 animation-delay: 1s;
}

.cat .eye.right {
 top: 25px;
 right: 25px;
 animation: eye-transform-right 8s;
 animation-delay: 1s;
}

.cat .mouth {
 position: absolute;
 left: 25px;
 bottom: 15px;
 width: 50px;
 height: 25px;
 background: #444;
 border-radius: 0px 0px 25px 25px;
 animation: mouth-transform 8s;
 animation-delay: 1s;
}

.cat .mouth .tongue {
 position: absolute;
 left: 15px;
 width: 20px;
 height: 35px;
 border-radius: 0 0 20px 20px;
 background: #FF89D5;
 animation: tongue-bounce infinite;
 animation-duration: .5s;
}

.cat .tail {
 position: absolute;
 width: 0;
 height: 0;
 bottom: 0;
 left: 0;
 background: #fff;
 border-radius: 0 15px 15px 0;
 animation: tail-transform 8s;
 animation-delay: 1s;
}

@keyframes cat-transform {
 0% {
 width: 100px;
 height: 100px;
 }
 10% {
 width: 100px;
 height: 150px;
 border-radius: 0;
 }
 90% {
 width: 100px;
 height: 150px;
 border-radius: 0;
 }
 100% {
 width: 100px;
 height: 100px;
 border-radius: 50%;
 }
}

@keyframes mouth-transform {
 0% {
 bottom: 15px;
 }
 10% {
 bottom: 80px;
 }
 90% {
 bottom: 80px;
 }
 100% {
 bottom: 15px;
 }
}

@keyframes tongue-bounce {
 0% {
 height: 35px;
 }
 50% {
 height: 50px;
 }
 100% {
 height: 35px;
 }
}

@keyframes ear-transform-left {
 0% {
 top: 20px;
 left: 20px;
 }
 10% {
 top: -20px;
 left: 0px;
 }
 90% {
 top: -20px;
 left: 0px;
 }
 100% {
 top: 20px;
 left: 20px;
 }
}

@keyframes ear-transform-right {
 0% {
 top: 20px;
 right: 20px;
 }
 10% {
 top: -20px;
 right: 0px;
 }
 90% {
 top: -20px;
 right: 0px;
 }
 100% {
 top: 20px;
 right: 20px;
 }
}

@keyframes eye-transform-left {
 0% {
 width: 20px;
 height: 20px;
 left: 25px;
 }
 10% {
 width: 10px;
 height: 10px;
 left: 15px;
 }
 90% {
 width: 10px;
 height: 10px;
 left: 15px;
 }
 100% {
 width: 20px;
 height: 20px;
 left: 25px;
 }
}

@keyframes eye-transform-right {
 0% {
 width: 20px;
 height: 20px;
 right: 25px;
 }
 10% {
 width: 10px;
 height: 10px;
 right: 15px;
 }
 90% {
 width: 10px;
 height: 10px;
 right: 15px;
 }
 100% {
 width: 20px;
 height: 20px;
 right: 25px;
 }
}

@keyframes tail-transform {
 0% {
 width: 0;
 height: 0;
 }
 10% {
 width: 175px;
 height: 15px;
 }
 90% {
 width: 175px;
 height: 15px;
 }
 100% {
 width: 0;
 height: 0;
 }
}
</style>

<div class="cat">
 <div class="ear right"></div>
 <div class="ear left"></div>
 <div class="eye left"></div>
 <div class="eye right"></div>
 <div class="mouth">
 <div class="tongue"></div>
 </div>
 <div class="tail"></div>
</div>

Пример со скриптом jQuery прелоадера кота

Разумеется роль прелоадера должна быть ограничена по времени, чтобы показать изначально скрытое содержимое дав ему полностью загрузится. Для этого мы Вам рекомендуем использовать скрипт jQuery, самый модифицированный на время формирования материала. Добавляем блочный элемент <div id="preloader"> чтобы на время загрузки скрыть основное содержимое страницы.

<style>
#preloader {
 background: #fff;
 position: fixed;
 z-index: 10001;
 height: 100%;
 width: 100%;
 overflow: hidden;
}

.cat {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100px;
 height: 100px;
 background: #d77d31;
 border-radius: 50%;
 animation: cat-transform 10s;
}

.cat .ear {
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 border-style: solid;
}

.cat .ear.left {
 top: 20px;
 left: 20px;
 border-width: 20px 0 0 20px;
 border-color: transparent transparent transparent #d77d31;
 animation: ear-transform-left 10s;
}

.cat .ear.right {
 top: 20px;
 right: 20px;
 border-style: solid;
 border-width: 0 0 20px 20px;
 border-color: transparent transparent #d77d31 transparent;
 animation: ear-transform-right 10s;
}

.cat .eye {
 position: absolute;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background: #333;
 z-index: 5;
}

.cat .eye.left {
 top: 25px;
 left: 25px;
 animation: eye-transform-left 8s;
 animation-delay: 1s;
}

.cat .eye.right {
 top: 25px;
 right: 25px;
 animation: eye-transform-right 8s;
 animation-delay: 1s;
}

.cat .mouth {
 position: absolute;
 left: 25px;
 bottom: 15px;
 width: 50px;
 height: 25px;
 background: #444;
 border-radius: 0px 0px 25px 25px;
 animation: mouth-transform 8s;
 animation-delay: 1s;
}

.cat .mouth .tongue {
 position: absolute;
 left: 15px;
 width: 20px;
 height: 35px;
 border-radius: 0 0 20px 20px;
 background: #FF89D5;
 animation: tongue-bounce infinite;
 animation-duration: .5s;
}

.cat .tail {
 position: absolute;
 width: 0;
 height: 0;
 bottom: 0;
 left: 0;
 background: #fff;
 border-radius: 0 15px 15px 0;
 animation: tail-transform 8s;
 animation-delay: 1s;
}

@keyframes cat-transform {
 0% {
 width: 100px;
 height: 100px;
 }
 10% {
 width: 100px;
 height: 150px;
 border-radius: 0;
 }
 90% {
 width: 100px;
 height: 150px;
 border-radius: 0;
 }
 100% {
 width: 100px;
 height: 100px;
 border-radius: 50%;
 }
}

@keyframes mouth-transform {
 0% {
 bottom: 15px;
 }
 10% {
 bottom: 80px;
 }
 90% {
 bottom: 80px;
 }
 100% {
 bottom: 15px;
 }
}

@keyframes tongue-bounce {
 0% {
 height: 35px;
 }
 50% {
 height: 50px;
 }
 100% {
 height: 35px;
 }
}

@keyframes ear-transform-left {
 0% {
 top: 20px;
 left: 20px;
 }
 10% {
 top: -20px;
 left: 0px;
 }
 90% {
 top: -20px;
 left: 0px;
 }
 100% {
 top: 20px;
 left: 20px;
 }
}

@keyframes ear-transform-right {
 0% {
 top: 20px;
 right: 20px;
 }
 10% {
 top: -20px;
 right: 0px;
 }
 90% {
 top: -20px;
 right: 0px;
 }
 100% {
 top: 20px;
 right: 20px;
 }
}

@keyframes eye-transform-left {
 0% {
 width: 20px;
 height: 20px;
 left: 25px;
 }
 10% {
 width: 10px;
 height: 10px;
 left: 15px;
 }
 90% {
 width: 10px;
 height: 10px;
 left: 15px;
 }
 100% {
 width: 20px;
 height: 20px;
 left: 25px;
 }
}

@keyframes eye-transform-right {
 0% {
 width: 20px;
 height: 20px;
 right: 25px;
 }
 10% {
 width: 10px;
 height: 10px;
 right: 15px;
 }
 90% {
 width: 10px;
 height: 10px;
 right: 15px;
 }
 100% {
 width: 20px;
 height: 20px;
 right: 25px;
 }
}

@keyframes tail-transform {
 0% {
 width: 0;
 height: 0;
 }
 10% {
 width: 175px;
 height: 15px;
 }
 90% {
 width: 175px;
 height: 15px;
 }
 100% {
 width: 0;
 height: 0;
 }
}
</style>

<div id="preloader">
<div class="cat">
 <div class="ear right"></div>
 <div class="ear left"></div>
 <div class="eye left"></div>
 <div class="eye right"></div>
 <div class="mouth">
 <div class="tongue"></div>
 </div>
 <div class="tail"></div>
</div>
</div>

<script>
$(window).on("load",function(){
$("#preloader").delay(10000).fadeOut("slow");
});
</script>

Время в скрипте установлено в 10000 миллисекунд = 10 секундам, соответственно времени работы анимации. Если Вы сократите время анимации, его нужно будет сократить и в скрипте.

Демо пример работы прелоадера кота

В примере время анимации трансформации кота было сокращено в 2 раза, чтобы посмотреть нажмите здесь