| Kentos311 | Дата: Среда, 10.01.2018, 01:38 | Сообщение # 1 |
Сообщений: 729
Статус:  | 
Когда будут заходить к вам посетители сайта или же пользователи, если у них до конца не загрузился сайт, то будет выходить такой прелоадер, который будет крутиться до тех пор, пока что не загрузит полную версию всего ресурса. Этот код работает на чистом CSS, и любой сможет его установить, также под себя вы сможете установить размер, цветовую гамму, скорость. Для тех у кого шаблон набит различными скриптами, то не рекомендую устанавливать!, так как он может загружать намного дольше обычного, и при этом никто не сможет посмотреть сайт.
Установка:
CSS:
Код <style type="text/css">
.c {
position: relative;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.c .center {
width: 30px;
height: 30px;
background-color: #179cbb;
border-radius: 100%;
position: relative;
}
.c .center:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
background-color: #179cbb;
-webkit-animation: center 2s infinite;
animation: center 2s infinite;
}
.c .r {
width: 10px;
height: 10px;
background-color: #179cbb;
position: absolute;
border-radius: 100%;
top: 10px;
left: 10px;
-webkit-animation: rotate 2s infinite;
animation: rotate 2s infinite;
}
.c .r1 {
-webkit-animation-timing-function: cubic-bezier(0.1, 0, 0, 0.9);
animation-timing-function: cubic-bezier(0.1, 0, 0, 0.9);
}
.c .r2 {
-webkit-animation-timing-function: cubic-bezier(0.1, 0.1, 0.8, 0.9);
animation-timing-function: cubic-bezier(0.1, 0.1, 0.8, 0.9);
}
.c .r3 {
-webkit-animation-timing-function: cubic-bezier(0.1, 0.2, 0.7, 0.9);
animation-timing-function: cubic-bezier(0.1, 0.2, 0.7, 0.9);
}
.c .r4 {
-webkit-animation-timing-function: cubic-bezier(0.1, 0.3, 0.6, 0.9);
animation-timing-function: cubic-bezier(0.1, 0.3, 0.6, 0.9);
}
.c .r5 {
-webkit-animation-timing-function: cubic-bezier(0.1, 0.4, 0.5, 0.9);
animation-timing-function: cubic-bezier(0.1, 0.4, 0.5, 0.9);
}
@-webkit-keyframes center {
to {
-webkit-transform: scale(3);
transform: scale(3);
opacity: 0;
}
}
@keyframes center {
to {
-webkit-transform: scale(3);
transform: scale(3);
opacity: 0;
}
HTML:
Код <div class="c"> <div class="center"> <div class="r r1"></div> <div class="r r2"></div> <div class="r r3"></div> <div class="r r4"></div> <div class="r r5"></div> </div> </div> |
| |
| |
