Само присутствие анимация на сайте создает ресурсу оригинальность и некую динамичность, что на прямую влияет Loader или загрузчик. Он сделан для того, когда страница или файл загружается, где в этот момент появляется Loader, что после полной загрузки он исчезает.
Ранее можно было увидеть такой формат на ссылке GIF, но теперь можно создать на чистом CSS, что совершенно не будет сама функция грузить и безусловно выглядит оригинально.
В нашем случай это круг, который начнет крутится на темном фоне, так как он идет в светлой гамме.
HTML
Код
<div class="gavorable-consideraton">Loading...</div>
CSS
Код
.gavorable-consideraton {
margin: 5em auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(249, 249, 249, 0.2);
border-right: 1.5em solid rgba(249, 249, 249, 0.2);
border-bottom: 1.5em solid rgba(249, 249, 249, 0.2);
border-left: 1.5em solid #efeeee;
-webkit-animation: load8 1.5s infinite linear;
animation: load8 1.5s infinite linear;
}
.gavorable-consideraton,
.gavorable-consideraton:after {
border-radius: 100%;
width: 8em;
height: 8em;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Что по стилистике и оформлению, то все выставляем в прикрепленных стилях.
Демонстрация
