Jump to content

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

Dusty
Dusty
in Invision Community 4 Support

Featured Replies

Posted
comment_180040

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

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

Спойлер

https://csowicze.pl/

 

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/
    Share on other sites
    comment_180041

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

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180041
    Share on other sites
    • Author
    comment_180042
    5 минут назад, by_ix сказал:

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

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

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180042
    Share on other sites
    comment_180043

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180043
    Share on other sites
    • Author
    comment_180044
    2 минуты назад, by_ix сказал:

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

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

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

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

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180044
    Share on other sites
    • Author
    comment_180051
    1 час назад, by_ix сказал:

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

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180051
    Share on other sites
    comment_180052
    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)}}

    Готово.

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180052
    Share on other sites
    • Author
    comment_180053
    Только что, 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)}}

    Готово.

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180053
    Share on other sites
    comment_180054
    17 минут назад, Dusty сказал:

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

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

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

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

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

    Edited by bon1

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180054
    Share on other sites
    • Author
    comment_180055
    9 минут назад, bon1 сказал: 
         <script>
      			$(document).ready(function(){
                  $(".preloader").fadeOut(2000); // 2000 вроде как отвечает за нее
                })
      		</script>

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

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

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

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

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180055
    Share on other sites
    comment_180075

    Hi

    check for Language RTL :

    Please FIX code for RTL

    rtl.jpg.9b5c9533935c97c6e1f090142aaf16fe.jpg

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180075
    Share on other sites
    comment_180076

    avangcom  

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

     

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180076
    Share on other sites
    comment_180077

    yes

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180077
    Share on other sites
    comment_180078

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

    321.png

    Edited by by_ix

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180078
    Share on other sites
    comment_180080

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180080
    Share on other sites
    comment_180081

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180081
    Share on other sites
    comment_180082

    rrr.jpg.5aae6d06d1d683004c4339665edeb4a0.jpgby_ix tested

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180082
    Share on other sites
    comment_180083

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180083
    Share on other sites
    comment_180084

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180084
    Share on other sites
    comment_180085

    by_ix Тест на LOCAL

    TESTED FOR LANGUAGE PERSIAN :

     

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180085
    Share on other sites
    comment_180095

    Working fine here.

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

    Yeah, I changed the background and loading bar colors XD

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180095
    Share on other sites
    comment_180096

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

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180096
    Share on other sites
    comment_180123

    благодаря @by_ix 

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

     

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180123
    Share on other sites
    comment_180126
    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}}

     

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=180126
    Share on other sites
    • 5 недель спустя...
    comment_181288

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

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

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

  • Цитата
    • Link to comment
    https://ipbmafia.ru/topic/24333-animaciya-zagruzki-sajta/?&do=findComment&comment=181288
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Ответить в этой теме...
    Go to topic listing

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

    • No registered users viewing this page.