Анимация загрузки сайта

Posted 16 апреля, 20223 yr

Как правильно добавить анимация загрузки на своем сайте ?

видел на этом сайте

Спойлер

https://csowicze.pl/

Цитата

16 апреля, 20223 yr

http://ipbmafia.ru/files/file/1996-preloaders-flat/

https://ipbmafia.ru/topic/23898-preloader-dlya-foruma/?do=findComment&comment=175932

Цитата

Mano
1

16 апреля, 20223 yr

Author

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

http://ipbmafia.ru/files/file/1996-preloaders-flat/

https://ipbmafia.ru/topic/23898-preloader-dlya-foruma/?do=findComment&comment=175932

Хотелось бы как на том сайте реализовать

Цитата

16 апреля, 20223 yr

разница в цвете и изображении анимации. суть прелоадеров везде одна и та же.

Цитата

or1k and mistudioru
2

16 апреля, 20223 yr

Author

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

разница в цвете и изображении анимации. суть прелоадеров везде одна и та же.

да но у него анимации в полоске а не на всем )

3 минуты назад, Dusty сказал:

да но у него анимации в полоске а не на всем )

изображение смог но анимацию не получилось добавить хых

Цитата

16 апреля, 20223 yr

Author

1 час назад, by_ix сказал:

разница в цвете и изображении анимации. суть прелоадеров везде одна и та же.

мм я просто не могу понять как правильно добавить скрипт с анимации прогрузки к полоске которая двигается как на оринг сайте увидел это.

Цитата

16 апреля, 20223 yr

3 минуты назад, Dusty сказал:

мм я просто не могу понять как правильно добавить скрипт с анимации прогрузки к полоске которая двигается как на оринг сайте увидел это.

Перед <body> ставим:

      <div class="preloader">
<img src="ссылка на логотип или картинку" alt="Описание или слоган">
<div class="loader">
<div class="loading"></div>
</div>
</div>

Перед </body> ставим:

     <script>
      			$(document).ready(function(){
                  $(".preloader").fadeOut(2000);
                })
      		</script>

В CSS кидаем:

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #1a2028;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.preloader img {
    display: block;
    margin-bottom: 50px;
    max-width: 240px;
}
.preloader .loader {
    position: absolute;
    left: 50%;
    margin-top: 2rem;
    transform: translate(-50%,-50%);
    height: 5px;
    width: 15rem;
    background-color: #1d242d;
}
.preloader .loading {
    background-color: red;
    width: 5rem;
    height: 5px;
    animation: animation 1.8s infinite;
}
@keyframes animation{0%{transform:translateX(0rem)}50%{transform:translateX(10rem)}100%{transform:translateX(0rem)}}

Готово.

Цитата

16 апреля, 20223 yr

Author

Только что, bon1 сказал:

Перед <body> ставим:

      <div class="preloader">
<img src="ссылка на логотип или картинку" alt="Описание или слоган">
<div class="loader">
<div class="loading"></div>
</div>
</div>

Перед </body> ставим:

     <script>
      			$(document).ready(function(){
                  $(".preloader").fadeOut(2000);
                })
      		</script>

В CSS кидаем:

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #1a2028;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.preloader img {
    display: block;
    margin-bottom: 50px;
    max-width: 240px;
}
.preloader .loader {
    position: absolute;
    left: 50%;
    margin-top: 2rem;
    transform: translate(-50%,-50%);
    height: 5px;
    width: 15rem;
    background-color: #1d242d;
}
.preloader .loading {
    background-color: red;
    width: 5rem;
    height: 5px;
    animation: animation 1.8s infinite;
}
@keyframes animation{0%{transform:translateX(0rem)}50%{transform:translateX(10rem)}100%{transform:translateX(0rem)}}

Готово.

Спасибо друг мне как раз этого кода не хватало

@keyframes animation{0%{transform:translateX(0rem)}50%{transform:translateX(10rem)}100%{transform:translateX(0rem)}}

4 минуты назад, bon1 сказал:

Перед <body> ставим:

      <div class="preloader">
<img src="ссылка на логотип или картинку" alt="Описание или слоган">
<div class="loader">
<div class="loading"></div>
</div>
</div>

Перед </body> ставим:

     <script>
      			$(document).ready(function(){
                  $(".preloader").fadeOut(2000);
                })
      		</script>

В CSS кидаем:

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #1a2028;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.preloader img {
    display: block;
    margin-bottom: 50px;
    max-width: 240px;
}
.preloader .loader {
    position: absolute;
    left: 50%;
    margin-top: 2rem;
    transform: translate(-50%,-50%);
    height: 5px;
    width: 15rem;
    background-color: #1d242d;
}
.preloader .loading {
    background-color: red;
    width: 5rem;
    height: 5px;
    animation: animation 1.8s infinite;
}
@keyframes animation{0%{transform:translateX(0rem)}50%{transform:translateX(10rem)}100%{transform:translateX(0rem)}}

Готово.

еще вопрос как мне настроить время прогрузки а то он быстро делает это

Цитата

16 апреля, 20223 yr

17 минут назад, Dusty сказал:

еще вопрос как мне настроить время прогрузки а то он быстро делает это

     <script>
      			$(document).ready(function(){
                  $(".preloader").fadeOut(2000); // 2000 вроде как отвечает за нее
                })
      		</script>

можно попробовать так:

      <script>
      			$(document).ready(function(){
                  $(".preloader").delay(3000).fadeOut('slow');
                })
      		</script>

в JS н очень силён, это чисто мои предположения по поводу этих кодов)

Edited 16 апреля, 20223 yr by bon1

Цитата

Dusty
1

16 апреля, 20223 yr

Author

9 минут назад, bon1 сказал:

     <script>
      			$(document).ready(function(){
                  $(".preloader").fadeOut(2000); // 2000 вроде как отвечает за нее
                })
      		</script>

можно попробовать так:

      <script>
      			$(document).ready(function(){
                  $(".preloader").delay(3000).fadeOut('slow');
                })
      		</script>

в JS н очень силён, это чисто мои предположения по поводу этих кодов)

во помог 2 вариантом)

Все можно тему закрыть

Цитата

16 апреля, 20223 yr

Hi

check for Language RTL :

Please FIX code for RTL

rtl.jpg.9b5c9533935c97c6e1f090142aaf16fe.jpg

Цитата

16 апреля, 20223 yr

avangcom

<img src="link to the img" alt="description or slogan">

Цитата

avangcom
1

16 апреля, 20223 yr

yes

by_ix I mean the red loader that is out of the box

Цитата

16 апреля, 20223 yr

avangcom всё работает нормально, если делать по инструкции.

Edited 16 апреля, 20223 yr by by_ix

Цитата

avangcom
1

16 апреля, 20223 yr

by_ix Да, это хорошо для английского, но плохо для персидского и арабского.

Цитата

by_ix
1

16 апреля, 20223 yr

avangcom если добавите туда картинку, а не текст, будет работать нормально.
описание можно оставить пустое.

Цитата

16 апреля, 20223 yr

rrr.jpg.5aae6d06d1d683004c4339665edeb4a0.jpg by_ix tested

Цитата

16 апреля, 20223 yr

avangcom ссылку на сайт сюда или в лс.

Цитата

16 апреля, 20223 yr

вы посмотрите форум @ZIKURIK польские форумы отдыхают

Цитата

16 апреля, 20223 yr

by_ix Тест на LOCAL

TESTED FOR LANGUAGE PERSIAN :

IPS4.6-Persian-Translation-Build-3.4.2.xml

Цитата

16 апреля, 20223 yr

Working fine here.

Yeah, I changed the background and loading bar colors XD

Цитата

16 апреля, 20223 yr

sorry the double post e.e
It didn't merge with the above

Цитата

17 апреля, 20223 yr

благодаря @by_ix

@keyframes animation{0%{transform:translateX(0rem)}50%{transform:translateX(-10rem)}100%{transform:translateX(0rem)}}

Цитата

by_ix
1

17 апреля, 20223 yr

21 hours ago, bon1 said:

Перед <body> ставим:

      <div class="preloader">
<img src="ссылка на логотип или картинку" alt="Описание или слоган">
<div class="loader">
<div class="loading"></div>
</div>
</div>

Вместо следующего кода и вставки ссылки вы также можете использовать следующую команду

{{if isset( \IPS\Theme::i()->logo['front']['url'] ) AND \IPS\Theme::i()->logo['front']['url'] !== null }}
{{$logo = \IPS\File::get( 'core_Theme', \IPS\Theme::i()->logo['front']['url'] )->url;}}
<div class="preloader">
   <img src="{$logo}" alt='{setting="board_name" escape="true"}'>
   <div class="loader">
     <div class="loading"></div>
     <p style="text-align:center;color:#fff;">{setting="board_name" escape="true"}</p>
   </div>
</div>
{{endif}}

Цитата

by_ix, bon1, Mano and 1 other
4

16 мая, 20223 yr

Для тех кому нужен прелоадер который работает не по таймеру, а по мере загрузки, вот код.

в globalTemplate

перед <body> вставляете

Спойлер

  <div class="preloader">
<img src="ссылка на логотип или картинку" alt="Описание или слоган">
<div class="loader">
<div class="loading"></div>
</div>
  </div>

перед </body> вставляете

Спойлер

      <script>
  window.onload = function () {
    document.body.classList.add('loaded_hiding');
    window.setTimeout(function () {
      document.body.classList.add('loaded');
      document.body.classList.remove('loaded_hiding');
    }, 500);
  }
      </script>

в custom.css вставляете

Спойлер

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  background: url(адрес картинки на фон по желанию вместо одноцветного фона) no-repeat center fixed;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: cover;
}

.preloader img {
    display: block;
    margin-bottom: 80px;
    max-width: 240px;
}
.preloader .loader {
    position: absolute;
    left: 50%;
    margin-top: 2rem;
    transform: translate(-50%,-50%);
    height: 5px;
    width: 15rem;
    background-color: #1d242d;
}
.preloader .loading {
    background-color: red;
    width: 5rem;
    height: 5px;
    animation: animation 1.8s infinite;
}
@keyframes animation{0%{transform:translateX(0rem)}50%{transform:translateX(10rem)}100%{transform:translateX(0rem)}}

.loaded_hiding .preloader {
  transition: 0.6s opacity;
  opacity: 0;
}

.loaded .preloader {
  display: none;
}

Второй вариант прелоадера - CSS анимация

перед <body> вставляете

Спойлер

<div class="preloader">
  <div class="preloader__row">
    <div class="preloader__item"></div>
    <div class="preloader__item"></div>
  </div>
</div>

перед </body> вставляете

Спойлер

<script>
  window.onload = function () {
    document.body.classList.add('loaded_hiding');
    window.setTimeout(function () {
      document.body.classList.add('loaded');
      document.body.classList.remove('loaded_hiding');
    }, 500);
  }
</script>

в custom.css вставляете

Спойлер

.preloader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #e0e0e0;
  z-index: 9999;
}

.preloader__row {
  position: relative;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  margin-top: -35px;
  margin-left: -35px;
  text-align: center;
  animation: preloader-rotate 2s infinite linear;
}

.preloader__item {
  position: absolute;
  display: inline-block;
  top: 0;
  background-color: #337ab7;
  border-radius: 100%;
  width: 35px;
  height: 35px;
  animation: preloader-bounce 2s infinite ease-in-out;
}

.preloader__item:last-child {
  top: auto;
  bottom: 0;
  animation-delay: -1s;
}

@keyframes preloader-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes preloader-bounce {

  0%,
  100% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }
}

.loaded_hiding .preloader {
  transition: 0.6s opacity;
  opacity: 0;
}

.loaded .preloader {
  display: none;
}

Пользуйтесь на здоровье=)

Цитата

Donjuan
1

Sign In

Анимация загрузки сайта

Featured Replies

Join the conversation

Последние посетители 0

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)