» »

Анимация загрузки страницы с помощью CSS

Анимация загрузки страницы с помощью CSS

Оригинальный по виртуальности эффект анимации при загрузке страницы на сайте, который появляется на время, пока полностью загрузка пройдет. Здесь по дизайн будет 2 круга, точнее как обручи, что против друг друга станут крутится, но также с присутствием двух оттенка цвета, что полностью настраиваются в стилистике CSS. Ранее больше предпочитали GIF-формат, но сейчас на стилях можно выставить намного красивый и смотреться безусловно станет уникально. Вы самостоятельно можете вмешаться в дизайн, это поменять цветовую гамму и сделать диаметр как больше, так и меньше, не говоря, что здесь можно скорость задать изначально.

Если говорить о самом preloaders, то больше вам известный как загрузчики, что каждый кто зашел на сайт будет наблюдать. Все зависит от скорости интернет, пока вы смотрите на этот загрузчик, то по сути страница полностью загружается, в то время как он пропадет, то вам откроется полностью загруженная страница, на которую вы перешли. Предварительные загрузчики часто представляют собой как простую, так и сложную анимационную фигуру, которая безусловно используется для того, чтобы посетители или гости развлекались во время обработки на ресурсе.

Здесь если время вышло, то появится надпись, что сами можете по тематике написать.

Страница загрузки анимации

Приступаем к установке:

HTML

Код
<body onload="zarnukdsa()">
  <h1>Привет</h1>
  <div id="Sarnukansuv">
  <div></div>
  </div>
</body>

JavaScript

Код
function loader(){
  loader = setTimeout(showPage, 36000)
}
function showPage(){
  document.getElementById("Loading").style.display = "none"
}

CSS

Код
@charset "utf8";
*,*:after,*:before,html{box-sizing:border-box}
body{margin:0;padding:0}
h1{
  font-family:font-family:Tahoma,Geneva,sans-serif;
  font-style:normal;
  font-weight:700;
  font-size:29px
  }
h1,#Sarnukansuv>div{
  top:47%;
  left:47%;
  display:block;
  position:absolute;
  transform:translate(-47%,-47%)
  }
#Sarnukansuv{
  background:#000;
  width:99%;
  height:99%;
  display:block;
  position:absolute;
  z-index:999
  }
#Sarnukansuv>div{width:199px;height:199px}
#Sarnukansuv>div:before,#Sarnukansuv>div:after{
  content:"";
  display:block;
  position:absolute;
  border-radius:71%;
  border:4px solid #d2710a;
  border-top-color:#244298
  }

#Sarnukansuv>div:before{width:100%;height:100%;animation:zarnukdsa 5s linear infinite}
#Sarnukansuv>div:after{
  width:148px;
  height:148px;
  top:25px;
  left:25px;
  animation:zarnukdsa 5s linear infinite reverse
  }
@keyframes zarnukdsa{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
  }

Все популярнее и больше можно замечать preloaders на разных тематических порталах.

Демонстрация
2018-04-29 Просмотров: 458 Комментарий: (6)

Поделиться в социальных сетях

Материал разместил

Комментарий: 6
VIP36RUS
VIP36RUS 2018-04-29 11:591
0
Я уже как года 2 пользуюсь наверно.
Kosten
Kosten 2018-04-29 23:092
0
Тоже в какое то время поставил, но это конструктор, и баннер статистики не мог загрузится, что приходилось долго ждать, так как страница полностью должна быть загруженной и после открывается.

Но здесь только дизайн идет.
-SAM-
-SAM- 2018-04-30 08:373
0
Советую другие использовать, что страницу не перекрывают собой (вот писал почему).
VIP36RUS
VIP36RUS 2018-05-03 18:334
0
На козе не пробовал.
Пробовал на UCP, IPS 4

Kosten
Kosten 2018-05-03 20:396
0
Но здесь загрузка совершенно другая, что на демонстрация представлена.
VIP36RUS
VIP36RUS 2018-05-03 18:365
0
А так смотрел аналогичные в интернете и всегда удивлялся почему же та или иная загрузка с багом. Как на козе копируют так же и тут (
avatar