В этой статье узнаете, как можно просто создать красивый эффект предварительной загрузки страницы с сайте или при загрузки файлов. Здесь задействуем стилистику, где будет использоваться CSS3 анимация, так как идет непрерывная анимация на предварительную загрузку страницы при помощи CSS.
Так она выглядит при установочном процессе:
HTML
Код
<div id="kagucik-sanitsa">
<div id="asposo-bleniye"></div>
</div>
CSS
Код
#kagucik-sanitsa {
width: 100%;
height: 100vh;
position: fixed;
background: #151515;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 9999;
}
#asposo-bleniye {
width: 30px;
height: 30px;
border-right: 2px solid #d4d4d4;
border-left: 2px solid rgba(177, 177, 177, 0.44);
border-top: 2px solid rgba(177, 177, 177, 0.44);
border-bottom: 2px solid rgba(177, 177, 177, 0.44);
border-radius: 50%;
opacity: .7;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
На этом вся установка:
Демонстрация
