Анимация загрузки страницы с помощью 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 на разных тематических порталах. 


Комментариев 0
Привет, оставишь комментарий?
Имя:*
E-Mail:


Внимание!

Пожертвование
Мы принимаем WebMoney

R807857153548
Z417987712394
B281910665473
Обновления new
  • Переход направление вверх и вниз на CSS
  • Эффект направление вверх и вниз выпадающего списка, который создан при помощи CSS, где может скрыть информацию и по клику открыть список.

  • Wonde - универсальный бизнес шаблон для uCoz
  • Бесплатный новостной шаблон сайта в стиле минимализма. Хорошее решение для ведения своего блога или портала новостей. Все чисто и аккуратно.&nbs ..

  • Горизонтальный топ пользователей по репутации для uCoz
  • Топ пользователей по репутации как на RootGames.Ru на данный момент, пример можете увидеть в персональной странице пользователя в са ..

  • Переключатель с использованием CSS и JS
  • Думаю многим интересно процесс создания оригинальных переключателей, которые можно увидеть на любом тематическом сайте под функцией.

  • Выпадающее горизонтальное меню с помощью CSS
  • По сути выпадающее меню или навигация представляет собой горизонтальный список разнообразных, но скорей всего тематических запросов под параметр ..

Информация