Красивый прелоадер для вашего сайта с красивой анимацией изменит загрузку страницы вашего сайта, что привлекать будет новых посетителей.
Установка:
- В верхнюю часть сайта после
body
устанавливаем код:
Код
<div class='spinner'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<svg>
<defs>
<filter id='goo'>
<feGaussianBlur in='SourceGraphic' stdDeviation='8' result='blur' />
<feColorMatrix in='blur' mode='matrix' values='
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 50 -8' result='goo' />
<feBlend in='SourceGraphic' in2='goo' />
</filter>
</defs>
</svg>
2. В CSS пропишем стили:
Панель управления → Управление дизайном → Таблица стилей (CSS)
Код
:root {
--spinner-size: 5rem;
--dot-size: calc(var(--spinner-size) / 5);
--duration: 3s;
--delay: calc(var(--duration) / 60);
}
body {
background: #4f70d2;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
20% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
25% {
-webkit-transform: translateX(0) translateY(calc(var(--spinner-size) - var(--dot-size)));
transform: translateX(0) translateY(calc(var(--spinner-size) - var(--dot-size)));
}
45% {
-webkit-transform: translateX(0) translateY(calc(var(--spinner-size) - var(--dot-size)));
transform: translateX(0) translateY(calc(var(--spinner-size) - var(--dot-size)));
}
50% {
-webkit-transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(calc(var(--spinner-size) - var(--dot-size)));
transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(calc(var(--spinner-size) - var(--dot-size)));
}
70% {
-webkit-transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(calc(var(--spinner-size) - var(--dot-size)));
transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(calc(var(--spinner-size) - var(--dot-size)));
}
75% {
-webkit-transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(0);
transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(0);
}
95% {
-webkit-transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(0);
transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(0);
}
}
@keyframes rotate {
from {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
20% {
-webkit-transform: translateX(0) translateY(0);
transform: translateX(0) translateY(0);
}
25% {
-webkit-transform: translateX(0) translateY(calc(var(--spinner-size) - var(--dot-size)));
transform: translateX(0) translateY(calc(var(--spinner-size) - var(--dot-size)));
}
45% {
-webkit-transform: translateX(0) translateY(calc(var(--spinner-size) - var(--dot-size)));
transform: translateX(0) translateY(calc(var(--spinner-size) - var(--dot-size)));
}
50% {
-webkit-transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(calc(var(--spinner-size) - var(--dot-size)));
transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(calc(var(--spinner-size) - var(--dot-size)));
}
70% {
-webkit-transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(calc(var(--spinner-size) - var(--dot-size)));
transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(calc(var(--spinner-size) - var(--dot-size)));
}
75% {
-webkit-transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(0);
transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(0);
}
95% {
-webkit-transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(0);
transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(0);
}
}
.spinner {
position: fixed;
top: 50%;
left: 50%;
height: var(--spinner-size);
width: var(--spinner-size);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.spinner > .dot {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-filter: url('#goo');
filter: url('#goo');
}
.spinner > .dot:nth-of-type(1):before {
-webkit-animation-delay: var(--delay);
animation-delay: var(--delay);
}
.spinner > .dot:nth-of-type(2) {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.spinner > .dot:nth-of-type(2):after {
-webkit-animation-delay: calc(var(--duration) / 12);
animation-delay: calc(var(--duration) / 12);
}
.spinner > .dot:nth-of-type(2):before {
-webkit-animation-delay: calc(var(--duration) / 12 + var(--delay));
animation-delay: calc(var(--duration) / 12 + var(--delay));
}
.spinner > .dot:nth-of-type(3) {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.spinner > .dot:nth-of-type(3):after {
-webkit-animation-delay: calc(var(--duration) / 6);
animation-delay: calc(var(--duration) / 6);
}
.spinner > .dot:nth-of-type(3):before {
-webkit-animation-delay: calc(var(--duration) / 6 + var(--delay));
animation-delay: calc(var(--duration) / 6 + var(--delay));
}
.spinner > .dot:after {
content: '';
position: absolute;
top: 0;
left: 0;
background: #FFF;
height: calc(var(--dot-size));
width: calc(var(--dot-size));
border-radius: 50%;
-webkit-animation: rotate var(--duration) linear infinite;
animation: rotate var(--duration) linear infinite;
}
.spinner > .dot:before {
content: '';
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, .4);
height: var(--dot-size);
width: var(--dot-size);
border-radius: 50%;
-webkit-animation: rotate var(--duration) linear infinite;
animation: rotate var(--duration) linear infinite;
}
Теги:
дополнение, script, красивый, UCOZ, украшение, модификация, Прелоадер, полезное, Скрипт
Комментариев пока нет..
Ты можешь быть первым, кто оставит комментарий к публикации!