Перейти к содержанию

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

Dusty
 Поделиться

Рекомендуемые сообщения

Dusty Ментор

Dusty

Опубликовано
Опубликовано

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

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

Спойлер

https://csowicze.pl/

 

Ссылка на комментарий
Поделиться на другие сайты
by_ix Мастер

by_ix

Опубликовано
Опубликовано

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

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

Ссылка на комментарий
Поделиться на другие сайты
Dusty Ментор

Dusty

Опубликовано
  • Автор
Опубликовано
5 минут назад, by_ix сказал:

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

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

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

Ссылка на комментарий
Поделиться на другие сайты
by_ix Мастер

by_ix

Опубликовано
Опубликовано

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

Ссылка на комментарий
Поделиться на другие сайты
Dusty Ментор

Dusty

Опубликовано
  • Автор
Опубликовано
2 минуты назад, by_ix сказал:

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

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

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

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

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

Ссылка на комментарий
Поделиться на другие сайты
Dusty Ментор

Dusty

Опубликовано
  • Автор
Опубликовано
1 час назад, by_ix сказал:

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

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

Ссылка на комментарий
Поделиться на другие сайты
bon1 Энтузиаст

bon1

Опубликовано
Опубликовано
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)}}

Готово.

Ссылка на комментарий
Поделиться на другие сайты
Dusty Ментор

Dusty

Опубликовано
  • Автор
Опубликовано
Только что, 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)}}

Готово.

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

Ссылка на комментарий
Поделиться на другие сайты
bon1 Энтузиаст

bon1

Опубликовано
Опубликовано (изменено)
17 минут назад, Dusty сказал:

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

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

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

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

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

Изменено пользователем bon1
Ссылка на комментарий
Поделиться на другие сайты
Dusty Ментор

Dusty

Опубликовано
  • Автор
Опубликовано
9 минут назад, bon1 сказал: 
     <script>
      			$(document).ready(function(){
                  $(".preloader").fadeOut(2000); // 2000 вроде как отвечает за нее
                })
      		</script>

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

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

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

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

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

Ссылка на комментарий
Поделиться на другие сайты
by_ix Мастер

by_ix

Опубликовано
Опубликовано

avangcom  

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

 

Ссылка на комментарий
Поделиться на другие сайты
by_ix Мастер

by_ix

Опубликовано
Опубликовано (изменено)

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

321.png

Изменено пользователем by_ix
Ссылка на комментарий
Поделиться на другие сайты
avangcom Специалист

avangcom

Опубликовано
Опубликовано

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

Ссылка на комментарий
Поделиться на другие сайты
by_ix Мастер

by_ix

Опубликовано
Опубликовано

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

Ссылка на комментарий
Поделиться на другие сайты
cyr4x Опытный

cyr4x

Опубликовано
Опубликовано

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

Ссылка на комментарий
Поделиться на другие сайты
avangcom Специалист

avangcom

Опубликовано
Опубликовано

by_ix Тест на LOCAL

TESTED FOR LANGUAGE PERSIAN :

 

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

Ссылка на комментарий
Поделиться на другие сайты
newload Основной

newload

Опубликовано
Опубликовано

Working fine here.

883663078_CapturadeTela2022-04-16as19_00_07.thumb.png.a453d71472b437f4b5a3d453f8dbb385.png

Yeah, I changed the background and loading bar colors XD

Ссылка на комментарий
Поделиться на другие сайты
newload Основной

newload

Опубликовано
Опубликовано

1123676767_CapturadeTela2022-04-16as19_11_23.thumb.png.407a46422a51d0e4e0759f854743be2e.png

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

Ссылка на комментарий
Поделиться на другие сайты
avangcom Специалист

avangcom

Опубликовано
Опубликовано

благодаря @by_ix 

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

 

Ссылка на комментарий
Поделиться на другие сайты
Xontero Специалист

Xontero

Опубликовано
Опубликовано
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}}

 

Ссылка на комментарий
Поделиться на другие сайты
  • 5 недель спустя...
MikeWolf Помощник

MikeWolf

Опубликовано
Опубликовано

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

в 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;
}

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

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

×
 Поделиться
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...