ZorNet.Ru — сайт для вебмастера » HTML и CSS » Прелоадер сайта "ждущий посетитель" на CSS

Прелоадер сайта "ждущий посетитель" на CSS

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

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

Здесь закреплен видео, где идет урок или мануал на тему, как создать пролай дер, где предоставлено 2 варианта:

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

Приступаем к установке:

HTML

Код
<div class="nouncemen">
  <div class="mingolution">Загрузка . . . </div>
  <div class="umblesackun"></div>
  <div class="salongawaite"></div>
  <div class="vidiatisalmos">
  <div class="donaplatomus"></div>
  </div>
</div>

CSS

Код
body {margin: 0;padding: 0;background-color: #191818;}
.donaplatomus{width:17px;height:10px;background-color:#f0dcdc;border-radius:0 0 18px 18px;position:relative;left:9px;top:38px;box-shadow:38px 0 0 0 #f0dcdc}
.vidiatisalmos{-webkit-backface-visibility:hidden;position:relative;margin:-245px auto;width:79px;height:79px;background-color:#191818;border-radius:48px;box-shadow:inset -3px 1px 0 0 #f0dcdc;-webkit-animation:vidiatisalmosAnim 1.7s infinite alternate;-webkit-animation-timing-function:ease-out}
.salongawaite{position:relative;margin:90px auto;width:153px;height:131px;background-color:#191818;border-radius:48px/24px;box-shadow:inset -5px 2px 0 0 #f0dcdc;-webkit-animation:salongawaiteAnim 1.7s infinite alternate;-webkit-animation-timing-function:ease-out}
@-webkit-keyframes vidiatisalmosAnim {
0%{top:0}
50%{top:10px}
100%{top:0}
}
@-webkit-keyframes salongawaiteAnim {
0%{top:-5px}
50%{top:10px}
100%{top:-5px}
}
.nouncemen{-webkit-backface-visibility:hidden;margin:60px auto;width:178px;height:178px;background-color:#191818;border-radius:0 0 48px 50px;position:relative;z-index:-1;left:0;top:18%;overflow:hidden}
.umblesackun{-webkit-backface-visibility:hidden;margin-top:139px;width:118px;height:118px;position:absolute;background-color:#191818;border-radius:19px;box-shadow:-1px -4px 0 0 #f0dcdc;-webkit-transform:rotate(45deg);top:75%;left:16%;z-index:1;-webkit-animation:salongawaiteAnim 1.5s infinite alternate;-webkit-animation-timing-function:ease-out}
.mingolution{position:absolute;width:7ch;height:35px;text-align:left;line-height:35px;margin:-10px auto;-webkit-font-smoothing:antialiased;font-family:'Julius Sans One',sans-serif;font-size:28px;font-weight:500;color:#e0d3d3;left:2%;top:5%;-webkit-animation:fontAnim 3.75s infinite;-webkit-animation-timing-function:ease-out;word-wrap:break-word;display:block;overflow:hidden}
@-webkit-keyframes fontAnim {
0%{width:7ch}
16%{width:8ch}
32%{width:9ch}
48%{width:10ch}
64%{width:11ch}
80%{width:12ch}
100%{width:13ch}
}

Вообще идет для темы, чтоб вы не скучали, а для этого нужно подобрать оригинальный вид, что думаю этот будет соответствовать многим тематическим направлением.

Видео урок:



Демонстрация
18 Августа 2018 Просмотров: 1347 Комментариев: (6)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

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

Комментарии: 6
pesd0z
pesd0z 19 Августа 2018 17:531
0
Видел на одном форуме hackroom(не реклама) по-моему.
Kosten
Kosten 19 Августа 2018 18:572
0
И как смотрится, здесь вероятно от интернет соединение еще зависит.
milan_shubin
milan_shubin 19 Августа 2018 20:123
0
Цитата pesd0z ()
Видел на одном форуме hackroom(не реклама) по-моему.

Эта Прелоадер сайта hackroom) ты не ошибся )
Kosten
Kosten 19 Августа 2018 21:364
0
Больше всего, что на многих ресурсах установлен, как материал, вообще на зарубежном сайте встречал.
milan_shubin
milan_shubin 19 Августа 2018 21:395
0
Цитата Kosten ()
Больше всего, что на многих ресурсах установлен, как материал, вообще на зарубежном сайте встречал.

Знаю, теперь все люди друг у друга копирует что-то и вставляет на сайт! 04b
К примеру этот Прелоадер уже на 2 сайтах установлен!
Kosten
Kosten 19 Августа 2018 22:246
0
Согласен, но если только брать тупа материал, но можно его по дизайн доработать как ты видишь. Если по этой странице, то здесь только оттенок цвета поменять можно и не более. А к примеру, как вид материалов или блок, там очень много чего можно на оригинальный материал добавить, но это уже только в плане дизайн.

Хотя в свое время вид материала брал, где с одного раскидывал до 3 и 4 блоков, плюс адаптация под мобильные.
Войдите:
avatar