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

рейтинг 1.0 из 5
Оригинальный по виртуальности эффект анимации при загрузке страницы на сайте, который появляется на время, пока полностью загрузка пройдет. Здесь по дизайн будет 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 на разных тематических порталах. 
  • Дата: 01.05.2018, 18:30
  • Просмотры: 56
  • Отзывы: 0
Автор материала
...
...
...
...
Поделиться в социальных сетях

Правила публикации комментариев:
1. Запрещено оскорблять, унижать в грубой форме других пользователей.
2. Мат и грубые слова запрещены, даже в скрытой форме, для этого существуют масса слов которые заменяют мат.
3. Запрещено писать ссылки на другие сайты (За исключением официальных сайтов uCoz, например: blog.uсoz.ru)
4. Запрещено флудить и спамить, предлогать услуги (например: рипы, адаптации, помогу с установкой и т.д. )

Комментарии
Добавить комментарий