В сети появляются много вопросов, это как можно самостоятельно создать анимацию в Facebook на чистом CSS. Давайте рассмотрим этот вариант загрузки, который аналогично выполнен на чистом стиле, также с таким же дизайном и анимацией, только CSS изменен.
Когда вы идете по офису на работе, читая новости по телефону, вы входите в лифт. Вы только что попытались загрузить новую страницу только после того, как вас встретил болезненный спиннер загрузки.
HTML
Код
<div class="vedukas-medopesab">
<div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
<div></div>
<div></div>
</div>
CSS
Код
.vedukas-medopesab{
background-color: rgb(255, 255, 255);
border-radius: 3px;
border-bottom: rgb(208, 209, 213) solid 1px;
border-left: rgb(223, 224, 228) solid 1px;
border-right-color: rgb(223, 224, 228) solid 1px;
border-top-color: rgb(229, 230, 233) solid 1px;
display: block;
height: 324px;
width: 494px;
padding: 12px;
}
.vedukas-medopesab > div:nth-child(1){
width:100%;
height:30px;
}
.vedukas-medopesab > div > div:nth-child(1){
position:relative;
left:0;
background-color: #CCC;
height: 40px;
width: 40px;
animation-name: shine;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.vedukas-medopesab > div > div:nth-child(2),
.vedukas-medopesab > div > div:nth-child(3),
.vedukas-medopesab > div:nth-child(2),
.vedukas-medopesab > div:nth-child(3),
.vedukas-medopesab > div:nth-child(4){
position:relative;
background-color: #CCC;
height: 6px;
animation-name: shine;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes shine {
from {transition:none;}
to {background-color:#f6f7f8;transition: all 0.3s ease-out;}
}
.vedukas-medopesab > div > div:nth-child(2){
left:50px;
top:-33px;
width: 25%;
}
.vedukas-medopesab > div > div:nth-child(3){
left:50px;
top:-20px;
width: 15%;
}
.vedukas-medopesab > div:nth-child(2){
left:0px;
top:30px;
width: 80%;
}
.vedukas-medopesab > div:nth-child(3){
left:0px;
top:45px;
width: 90%;
}
.vedukas-medopesab > div:nth-child(4){
left:0px;
top:60px;
width: 50%;
}
Тщательно продуманный дизайн учитывает различные скорости интернета и отображает состояние загрузки для пользователя. Также можете посмотреть аналогичную загрузку по дизайну, которая немного по другому создана.
Демонстрация
