ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация загрузки страницы с помощью 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 на разных тематических порталах.

Демонстрация

29 Апреля 2018 Просмотров: 2292 Комментариев: (6)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 6
Порядок вывода комментариев: VIP36RUS 29 Апреля 2018 11:59¹ 0 Я уже как года 2 пользуюсь наверно. Kosten 29 Апреля 2018 23:09² 0 Тоже в какое то время поставил, но это конструктор, и баннер статистики не мог загрузится, что приходилось долго ждать, так как страница полностью должна быть загруженной и после открывается. Но здесь только дизайн идет. -SAM- 30 Апреля 2018 08:37³ 0 Советую другие использовать, что страницу не перекрывают собой (вот писал почему). VIP36RUS 03 Мая 2018 18:33⁴ 0 На козе не пробовал. Пробовал на UCP, IPS 4 Kosten 03 Мая 2018 20:39⁶ 0 Но здесь загрузка совершенно другая, что на демонстрация представлена. VIP36RUS 03 Мая 2018 18:36⁵ 0 А так смотрел аналогичные в интернете и всегда удивлялся почему же та или иная загрузка с багом. Как на козе копируют так же и тут (