• Страница 1 из 1
  • 1
Форум » Веб-разработка » Структура кода HTML » Красивый дизайн круга (loading) загрузки сайта (Создать светящийся круг загрузки для блога или сайта)
Красивый дизайн круга (loading) загрузки сайта
Kosten
Дата: Среда, 2020-06-03, 21:01 | Сообщение 1
Оффлайн
Администраторы
Сообщений:26689
Награды: 61


Красиво по своей стилистике создан анимированный прелоадер для компьютерных программ и мобильных приложений. Современный стиль оттенка цвета, что светится на preloader и прогресс загрузки круг на черном фоне. Это отличное решение для темного сайта или фона, где будет присутствовать загрузчик. Так как он создан на чистом CSS, где присутствует 2 элемента внутри круга, которые кружатся по своей оси, что смотрится великолепно.

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



HTML

Код
<div class="loader">
  <img class="logo"  src="https://lh3.googleusercontent.com/B5if7wOTRz3O7EjzulL7zJOPTWH2cOi5dxOSrAysqLPqk22NAdxpTO6nT2JVJgoetzjp7scm5LLfrA=w733-h734-rw-no" >
  <div class="face face1">
    <div class="circle"></div>
  </div>
  
  <div class="face face2">
    <div class="circle"></div>
  </div>
  
</div>

CSS

Код
body
{
  margin:0;
  padding:0;
background: linear-gradient(to right, rgb(68, 160, 141), rgb(9, 54, 55));
  height: calc(100vh - 86px);
}

.boardname{
color: #fdef48;
  left: 50%;
  right: 50%;
  width: 290px;
  font-family: -webkit-body;
  letter-spacing: 1px;
  font-weight: bold;
  top: 10px;
  transform: translate(-50%, -50%);
  position: absolute;
  font-size: 42px;
  text-shadow: 2px 4px 8px #042323;
}

.loader
{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:200px;
  height:200px;
  box-sizing:border-box;
}

.logo
{
position: absolute;
  width: 115px;
  height: 115px;
  z-index: 1;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 12px solid #04040417;
}

.loader .face
{
  position:absolute;
  border:2px solid #12121221;
}

.loader .face.face1
{
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: #0909093d;
  border-radius:50%;
  border-left:2px solid #ffff00;
  border-top:2px solid #ffff00;
  animation: animate 3s linear infinite;
}

.loader .face.face2
{
  top:30px;
  left:30px;
  right:30px;
  bottom:30px;
  background: #09090917;
  border-radius:50%;
  border-right:2px solid #03a9f4;
  border-bottom:2px solid #03a9f4;
   animation: animate 3s linear reverse infinite;
}

.loader .face .circle
{
  position:absolute;
  top: calc(50% - 1px);
  left:50%;
  width:50%;
  height:2px;
  transform-origin:left;
}

.loader .face.face1 .circle
{
transform: rotate(-45deg);
}

.loader .face.face2 .circle
{
transform: rotate(-45deg);
}

.loader .face .circle:before
{
  content:'';
  position: absolute;
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#fff;
  top:-4px;
  right:-6px;
}

.loader .face.face1 .circle:before
{
  background: #ffff00;
  box-shadow:0 0 20px #ff0,
             0 0 40px #ff0,
             0 0 60px #ff0,
             0 0 80px #ff0,
             0 0 100px #ff0,
             0 0 0 5px rgba(255,255,0,.1);
}

.loader .face.face2 .circle:before
{
  background: #03a9f4;
  box-shadow:0 0 20px #03a9f4,
             0 0 40px #03a9f4,
             0 0 60px #03a9f4,
             0 0 80px #03a9f4,
             0 0 100px #03a9f4,
             0 0 0 5px rgba(3,169,244,.1);
}

@keyframes animate
{
  0%
  {
    transform: rotate(0deg);
  }
  100%
  {
    transform: rotate(360deg);
  }
  
  
}

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

Демонстрация
Прикрепления: 4124017.jpg(21.0 Kb) · glowing-circle-.zip(4.1 Kb)
Страна: (RU)
Форум » Веб-разработка » Структура кода HTML » Красивый дизайн круга (loading) загрузки сайта (Создать светящийся круг загрузки для блога или сайта)
  • Страница 1 из 1
  • 1
Поиск: