Привет всем пользователям интернета и данного сервиса. 

 

Поставил себе вопрос, а как сделать такой же прелоадер на главную страницу форума/сайта как у react labs?

 

 

А тот кто скинет код - вообще красавчик и замены просто нету! Замечу, мне просто CSS этого прелоадера, и HTML, как в код вставить я разбираюсь)

Я пока сидел и думал, вот что надумал. Для CSS нарисовать может быть в фигме и вставить в код сразу? 

 

Если так можно, то прошу пожалуйста только HTML и JS (знаю что применяется + нужно что бы цвета переливались, кто не шарит, залетайте на форум Trinity RP (SAMP) нет не реклама, а пример)

2 часа назад, RobinLopes сказал:

Привет всем пользователям интернета и данного сервиса. 

 

Поставил себе вопрос, а как сделать такой же прелоадер на главную страницу форума/сайта как у react labs?

 

 

А тот кто скинет код - вообще красавчик и замены просто нету! Замечу, мне просто CSS этого прелоадера, и HTML, как в код вставить я разбираюсь)

Я пока сидел и думал, вот что надумал. Для CSS нарисовать может быть в фигме и вставить в код сразу? 

 

Если так можно, то прошу пожалуйста только HTML и JS (знаю что применяется + нужно что бы цвета переливались, кто не шарит, залетайте на форум Trinity RP (SAMP) нет не реклама, а пример)

Это ddos защита от Реакта, купи у них хостинг и получишь ее 

только придется выложить как минимум 70$

если у тебя форум с максимум 100 посетителями за сутки, тебе это не нужно, это используют большие проекты которые зачастую дудосят

11 часов назад, cyr4x сказал:

Это ddos защита от Реакта, купи у них хостинг и получишь ее 

только придется выложить как минимум 70$

если у тебя форум с максимум 100 посетителями за сутки, тебе это не нужно, это используют большие проекты которые зачастую дудосят

Нет, так это я знаю, я просто хочу такую же фичу реализовать в качестве прелоадера на главную страницу. Вместо DDOS протекшион и так далее сделать что то своё

Но с такой же бекграунд анимацией и похожей стилистикой )

 

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

RobinLopes делал как то давно себе прелоадер с SVG анимацией

Спойлер

<div class="ipsResponsive_hidePhone ipsResponsive_block"><style type="text/css">#hellopreloader>p{display:none;}#hellopreloader_preload{display: block;position: fixed;z-index: 99999;top: 0;left: 0;width: 100%;height: 100%;min-width: 1000px;background: #49536999 url(/uploads/index.svg) center center no-repeat;background-size:450px;}</style>
<div id="hellopreloader"><div id="hellopreloader_preload"></div><p></p></div>
<script type="text/javascript">var hellopreloader = document.getElementById("hellopreloader_preload");function fadeOutnojquery(el){el.style.opacity = 1;var interhellopreloader = setInterval(function(){el.style.opacity = el.style.opacity - 0.05;if (el.style.opacity <=0.05){ clearInterval(interhellopreloader);hellopreloader.style.display = "none";}},16);}window.onload = function(){setTimeout(function(){fadeOutnojquery(hellopreloader);},800);};</script></div>

323232.svganimated.svgindex.svg

323232.svg animated.svg index.svg

8 минут назад, SlawkA сказал:

background: #49536999

прозрачность лучше в ргб делать. некоторые браузеры на телефонах могут не видеть её в хексе. 

Так это всё для красоты, типо, пользователю показать красивую заставку перед тем, как он окончательно потеряет терпение и сдристнет с сайта? Или в этом есть какой-то сакральный смысл? А то у меня Cloudflare и так заставку показывает тем, кто через некоторые прокси на сайт заходит, пока проверяет на DDoS и т.п. Правда не такую разноцветную.

34 минуты назад, SlawkA сказал:

RobinLopes делал как то давно себе прелоадер с SVG анимацией

  Показать контент

<div class="ipsResponsive_hidePhone ipsResponsive_block"><style type="text/css">#hellopreloader>p{display:none;}#hellopreloader_preload{display: block;position: fixed;z-index: 99999;top: 0;left: 0;width: 100%;height: 100%;min-width: 1000px;background: #49536999 url(/uploads/index.svg) center center no-repeat;background-size:450px;}</style>
<div id="hellopreloader"><div id="hellopreloader_preload"></div><p></p></div>
<script type="text/javascript">var hellopreloader = document.getElementById("hellopreloader_preload");function fadeOutnojquery(el){el.style.opacity = 1;var interhellopreloader = setInterval(function(){el.style.opacity = el.style.opacity - 0.05;if (el.style.opacity <=0.05){ clearInterval(interhellopreloader);hellopreloader.style.display = "none";}},16);}window.onload = function(){setTimeout(function(){fadeOutnojquery(hellopreloader);},800);};</script></div>

323232.svg 5 \u043a\u0411 · 0 загрузок animated.svg 3 \u043a\u0411 · 0 загрузок index.svg 5 \u043a\u0411 · 0 загрузок

323232.svg 5 \u043a\u0411 · 0 загрузок animated.svg 3 \u043a\u0411 · 0 загрузок index.svg 5 \u043a\u0411 · 0 загрузок

А для HTML? Не будет версии? Вижу что проскакивают ips)

19 минут назад, Zero108 сказал:

Так это всё для красоты, типо, пользователю показать красивую заставку перед тем, как он окончательно потеряет терпение и сдристнет с сайта? Или в этом есть какой-то сакральный смысл? А то у меня Cloudflare и так заставку показывает тем, кто через некоторые прокси на сайт заходит, пока проверяет на DDoS и т.п. Правда не такую разноцветную.

Это будет как в форме приветствия, пока сайт окончательно не закончит загрузку (ну и также перенаправление для DDOS сервиса)

 

24 минуты назад, by_ix сказал:

прозрачность лучше в ргб делать. некоторые браузеры на телефонах могут не видеть её в хексе. 

По типу времён царя Владимира II?

27 минут назад, by_ix сказал:

прозрачность лучше в ргб делать. некоторые браузеры на телефонах могут не видеть её в хексе. 

в коде хайд стоит на моб версию

Мне просто нужно для сайта-одностраничника (сорян если засунул не туда тему)

Но я так понимаю что и для форума сработает

Edited 19 декабря, 20212 yr by RobinLopes

 

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