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

 

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

 

 

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

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

 

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

  On 18.12.2021 at 18:52, RobinLopes said:

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

 

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

 

 

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

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

 

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

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

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

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

  On 18.12.2021 at 21:32, cyr4x said:

Это 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.svgUnavailable animated.svgUnavailable index.svgUnavailable

323232.svgUnavailable animated.svgUnavailable index.svgUnavailable

  On 19.12.2021 at 09:04, SlawkA said:

background: #49536999

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

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

  On 19.12.2021 at 09:04, SlawkA said:

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)

  On 19.12.2021 at 09:20, Zero108 said:

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

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

 

  On 19.12.2021 at 09:16, by_ix said:

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

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

  On 19.12.2021 at 09:16, by_ix said:

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

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

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

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

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

 

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