Dusty Опубликовано 16 апреля, 2022 Поделиться Опубликовано 16 апреля, 2022 Как правильно добавить анимация загрузки на своем сайте ? видел на этом сайте Спойлер https://csowicze.pl/ Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
by_ix Опубликовано 16 апреля, 2022 Поделиться Опубликовано 16 апреля, 2022 http://ipbmafia.ru/files/file/1996-preloaders-flat/ https://ipbmafia.ru/topic/23898-preloader-dlya-foruma/?do=findComment&comment=175932 Mano 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Dusty Опубликовано 16 апреля, 2022 Автор Поделиться Опубликовано 16 апреля, 2022 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 Опубликовано 16 апреля, 2022 Поделиться Опубликовано 16 апреля, 2022 разница в цвете и изображении анимации. суть прелоадеров везде одна и та же. mistudioru и or1k 2 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Dusty Опубликовано 16 апреля, 2022 Автор Поделиться Опубликовано 16 апреля, 2022 2 минуты назад, by_ix сказал: разница в цвете и изображении анимации. суть прелоадеров везде одна и та же. да но у него анимации в полоске а не на всем ) 3 минуты назад, Dusty сказал: да но у него анимации в полоске а не на всем ) изображение смог но анимацию не получилось добавить хых Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Dusty Опубликовано 16 апреля, 2022 Автор Поделиться Опубликовано 16 апреля, 2022 1 час назад, by_ix сказал: разница в цвете и изображении анимации. суть прелоадеров везде одна и та же. мм я просто не могу понять как правильно добавить скрипт с анимации прогрузки к полоске которая двигается как на оринг сайте увидел это. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
bon1 Опубликовано 16 апреля, 2022 Поделиться Опубликовано 16 апреля, 2022 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)}} Готово. newload, Dusty и Mano 1 2 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Dusty Опубликовано 16 апреля, 2022 Автор Поделиться Опубликовано 16 апреля, 2022 Только что, 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 Опубликовано 16 апреля, 2022 Поделиться Опубликовано 16 апреля, 2022 (изменено) 17 минут назад, Dusty сказал: еще вопрос как мне настроить время прогрузки а то он быстро делает это <script> $(document).ready(function(){ $(".preloader").fadeOut(2000); // 2000 вроде как отвечает за нее }) </script> можно попробовать так: <script> $(document).ready(function(){ $(".preloader").delay(3000).fadeOut('slow'); }) </script> в JS н очень силён, это чисто мои предположения по поводу этих кодов) Изменено 16 апреля, 2022 пользователем bon1 Dusty 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Dusty Опубликовано 16 апреля, 2022 Автор Поделиться Опубликовано 16 апреля, 2022 9 минут назад, bon1 сказал: <script> $(document).ready(function(){ $(".preloader").fadeOut(2000); // 2000 вроде как отвечает за нее }) </script> можно попробовать так: <script> $(document).ready(function(){ $(".preloader").delay(3000).fadeOut('slow'); }) </script> в JS н очень силён, это чисто мои предположения по поводу этих кодов) во помог 2 вариантом) Все можно тему закрыть Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
avangcom Опубликовано 16 апреля, 2022 Поделиться Опубликовано 16 апреля, 2022 Hi check for Language RTL : Please FIX code for RTL Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
by_ix Опубликовано 16 апреля, 2022 Поделиться Опубликовано 16 апреля, 2022 avangcom <img src="link to the img" alt="description or slogan"> avangcom 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
avangcom Опубликовано 16 апреля, 2022 Поделиться Опубликовано 16 апреля, 2022 yes by_ix I mean the red loader that is out of the box Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
by_ix Опубликовано 16 апреля, 2022 Поделиться Опубликовано 16 апреля, 2022 (изменено) avangcom всё работает нормально, если делать по инструкции. Изменено 16 апреля, 2022 пользователем by_ix avangcom 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
avangcom Опубликовано 16 апреля, 2022 Поделиться Опубликовано 16 апреля, 2022 by_ix Да, это хорошо для английского, но плохо для персидского и арабского. by_ix 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
by_ix Опубликовано 16 апреля, 2022 Поделиться Опубликовано 16 апреля, 2022 avangcom если добавите туда картинку, а не текст, будет работать нормально. описание можно оставить пустое. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
avangcom Опубликовано 16 апреля, 2022 Поделиться Опубликовано 16 апреля, 2022 by_ix tested Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
by_ix Опубликовано 16 апреля, 2022 Поделиться Опубликовано 16 апреля, 2022 avangcom ссылку на сайт сюда или в лс. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
cyr4x Опубликовано 16 апреля, 2022 Поделиться Опубликовано 16 апреля, 2022 вы посмотрите форум @ZIKURIK польские форумы отдыхают Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
avangcom Опубликовано 16 апреля, 2022 Поделиться Опубликовано 16 апреля, 2022 by_ix Тест на LOCAL TESTED FOR LANGUAGE PERSIAN : IPS4.6-Persian-Translation-Build-3.4.2.xml Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
newload Опубликовано 16 апреля, 2022 Поделиться Опубликовано 16 апреля, 2022 Working fine here. Yeah, I changed the background and loading bar colors XD Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
newload Опубликовано 16 апреля, 2022 Поделиться Опубликовано 16 апреля, 2022 sorry the double post e.e It didn't merge with the above Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
avangcom Опубликовано 17 апреля, 2022 Поделиться Опубликовано 17 апреля, 2022 благодаря @by_ix @keyframes animation{0%{transform:translateX(0rem)}50%{transform:translateX(-10rem)}100%{transform:translateX(0rem)}} by_ix 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Xontero Опубликовано 17 апреля, 2022 Поделиться Опубликовано 17 апреля, 2022 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}} bon1, newload, by_ix и 1 другой 4 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
MikeWolf Опубликовано 16 мая, 2022 Поделиться Опубликовано 16 мая, 2022 Для тех кому нужен прелоадер который работает не по таймеру, а по мере загрузки, вот код. в 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 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.