Анимационная загрузка Preloaders для страницы


На современных сайтах нельзя не заметить анимированные прелоадеры, которые отвечают за загрузку страниц, что работают некоторые на CSS. Здесь как раз один представлен, что будет работать на чистых стилях. А сама фигура выполнена форме круга, где по всем сторонам идет волна пульсаций. Возможно вы видели кнопки под функцию позвонить, что не исключаю, это загрузка была создана с таких элементов. Так как только вместо трубки, что в центре находится, здесь будет надпись. 



По своей стилистике смотрится простым и элегантным видом, также все аккуратно выстроено, где безусловно способно добавить немного индивидуальности на интернет ресурсе. Где также будет визуально красиво смотреться и при этом еще обеспечивает отличный переход на ваш сайт или страницу, если произошла полная загрузка. Этот предварительный загрузчик, что появится, когда гость или пользователь решить перейти на совершенно другую страницу или зайдет с внешней ссылки на портал, где установлен элемент. Здесь рассмотрим простой и в то же время привлекательный вариант. 



HTML 



Код
<div id="lakismipsa_mkagem"> 

  <p id="kanteglom_dbutas">загрузка</p> 

</div>

CSS 



Код
@import url(https://fonts.googleapis.com/css?family=Raleway:400,800,200); 

body { 

  background-color: #2c78ab; 





#lakismipsa_mkagem { 

  width: 195px; 

  height: 195px; 

  color: white; 

  margin: 0 auto; 

  position: absolute; 

  top: 47%; 

  left: 47%; 

  margin-right: -50%; 

  transform: translate(-50%, -50%); 

  border: 5px solid #3498db; 

  border-radius: 50%; 

  -webkit-animation: borderScale 1s infinite ease-in-out; 

  animation: borderScale 1s infinite ease-in-out; 





#kanteglom_dbutas { 

  font-family: 'Raleway', sans-serif; 

  font-weight: bold; 

  font-size: 2em; 

  position: absolute; 

  top: 35%; 

  left: 50%; 

  margin-right: -48%; 

  transform: translate(-49%, -49%); 





@-webkit-keyframes borderScale { 

  0% { 

  border: 5px solid #f5efef; 

  } 

  50% { 

  border: 25px solid #378bc3; 

  } 

  100% { 

  border: 5px solid #f3efef; 

  } 





@keyframes borderScale { 

  0% { 

  border: 5px solid #eae9e9; 

  } 

  50% { 

  border: 25px solid #4ca0d8; 

  } 

  100% { 

  border: 5px solid #f7f1f1; 

  } 

}


Эта анимационный кадра будет является основой всей анимации CSS. 


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


Внимание!

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

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

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

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

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

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

Информация