Современный облачный хостинг провайдер | Aéza
Контакты ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430

XF 2.2 Красивый переход на другую страницу

Версия XenForo
XF 2.2.4.0.0
Waynet

Waynet

Проверенные
Сообщения
253
Решения
10
Реакции
67
Баллы
180
Хелло, ребятки, помогите пожалуйста. Уже весь форум перерыл, в исходный код заходил, да не нашёл ответа.
Есть красивая анимация при переходе или загрузке форума.
Screenshot_764.png
Только анимацию мне показать не получится, поэтому держите ссылку на
У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Очень надеюсь на вас! Спасайте ребята!
 
Сортировка по дате Сортировка по голосам
bingo-maen написал(а):
Это не плагин, это preloader. Можешь попробовать пообщаться с ChatGPT, возможно он выдаст тебе что-то подобное.
Нажмите для раскрытия...
Благодарю, попробую. Но, если будет точный код, сообщите пожалуйста)
 
Позитивный голос 0 Негативный голос
И все у кого медленный интернет или с мобильного вместо того чтобы читать или смотреть что успело загрузиться будут смотреть на этот прелоадер пока страница полностью в браузере не прогрузится. А если на странице много чего то,или попадется внешний скрипт который в силу разных причин стал пускай и временно но очень долго загружаться, то смотреть можно очень и очень долго и познать дзен.
Лучше не делайте такого,пользователей такая штука бесит. Проверено.

Р.S. О чем я и говорил. С пол минуты посмотрел и вышел обратно
Screenshot_2023-04-22-10-51-48-045_com.opera.browser.jpg
 
Последнее редактирование:
Позитивный голос 0 Негативный голос
It Works написал(а):
И все у кого медленный интернет или с мобильного вместо того чтобы читать или смотреть что успело загрузиться будут смотреть на этот прелоадер пока страница полностью в браузере не прогрузится. А если на странице много чего то смотреть можно очень и очень долго и познать дзен.
Лучше не делайте такого,пользователей такая штука бесит. Проверено.
Нажмите для раскрытия...
Я знаю, мне это нужно для клиента, он попросил такую фичу. Впервые с preloader`ом сталкиваюсь)
 
Позитивный голос 0 Негативный голос
Надеюсь со встраиванием разберетесь :)

HTML: 
<div class="preloader">
   <div class="loader-text">ЗАГРУЗКА</div>
   <div class="loader"></div>
</div>


CSS: 
.preloader {
  background: #0a0f17;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9999;
}

.loader-text {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #999;
  width: 100px;
  height: 30px;
  margin: -7px 0 0 -45px;
  text-align: center;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 20px;
}

.loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 170px;
  margin: -85px 0 0 -85px;
  border: 3px solid #F00;
}

.loader {
  border: 3px solid transparent;
  border-top-color: #4D658D;
  border-bottom-color: #4D658D;
  border-radius: 50%;
  animation: loader 2s linear infinite;
}

.loader:before {
  content: "";
  position: absolute;
  border: 3px solid #00F;
  left: 5px;
  right: 5px;
  top: 5px;
  bottom: 5px;
}

.loader:before {
  border: 3px solid transparent;
  border-top-color: #D4CC6A;
  border-bottom-color: #D4CC6A;
  border-radius: 50%;
  animation: loader 3s linear infinite;
}

.loader:after {
  content: "";
  position: absolute;
  border: 3px solid #0F0;
  left: 15px;
  right: 15px;
  top: 15px;
  bottom: 15px;
}

loader:after {
  border: 3px solid transparent;
  border-top-color: #84417C;
  border-bottom-color: #84417C;
  border-radius: 50%;
  animation: loader 1.5s linear infinite;
}

.loader:after {
  border: 3px solid transparent;
  border-top-color: #84417C;
  border-bottom-color: #84417C;
  border-radius: 50%;
  animation: loader 1.5s linear infinite;
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


JavaScript: 
$(window).on('load', function() {
  $('.loader').delay(1000).fadeOut();
  $('.preloader').delay(1000).fadeOut('slow');
})
 
Последнее редактирование:
Позитивный голос 0 Негативный голос
bingo-maen написал(а):
Надеюсь со встраиванием разберетесь :)

HTML: 
<div class="preloader">
   <div class="loader-text">ЗАГРУЗКА</div>
   <div class="loader"></div>
</div>


CSS: 
.preloader {
  background: #0a0f17;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9999;
}

.loader-text {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #999;
  width: 100px;
  height: 30px;
  margin: -7px 0 0 -45px;
  text-align: center;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 20px;
}

.loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 170px;
  margin: -85px 0 0 -85px;
  border: 3px solid #F00;
}

.loader {
  border: 3px solid transparent;
  border-top-color: #4D658D;
  border-bottom-color: #4D658D;
  border-radius: 50%;
  animation: loader 2s linear infinite;
}

.loader:before {
  content: "";
  position: absolute;
  border: 3px solid #00F;
  left: 5px;
  right: 5px;
  top: 5px;
  bottom: 5px;
}

.loader:before {
  border: 3px solid transparent;
  border-top-color: #D4CC6A;
  border-bottom-color: #D4CC6A;
  border-radius: 50%;
  animation: loader 3s linear infinite;
}

.loader:after {
  content: "";
  position: absolute;
  border: 3px solid #0F0;
  left: 15px;
  right: 15px;
  top: 15px;
  bottom: 15px;
}

loader:after {
  border: 3px solid transparent;
  border-top-color: #84417C;
  border-bottom-color: #84417C;
  border-radius: 50%;
  animation: loader 1.5s linear infinite;
}

.loader:after {
  border: 3px solid transparent;
  border-top-color: #84417C;
  border-bottom-color: #84417C;
  border-radius: 50%;
  animation: loader 1.5s linear infinite;
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


JavaScript: 
setTimeout(function() {
  document.querySelector('.loader').style.display = 'none';
  document.querySelector('.preloader').style.display = 'none';
}, 2000);
Нажмите для раскрытия...
Благодарю , со встраиванием естественно разберусь. Очень помогли)
 
Позитивный голос 0 Негативный голос
bingo-maen написал(а):
Надеюсь со встраиванием разберетесь :)

HTML: 
<div class="preloader">
   <div class="loader-text">ЗАГРУЗКА</div>
   <div class="loader"></div>
</div>


CSS: 
.preloader {
  background: #0a0f17;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9999;
}

.loader-text {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #999;
  width: 100px;
  height: 30px;
  margin: -7px 0 0 -45px;
  text-align: center;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 20px;
}

.loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 170px;
  margin: -85px 0 0 -85px;
  border: 3px solid #F00;
}

.loader {
  border: 3px solid transparent;
  border-top-color: #4D658D;
  border-bottom-color: #4D658D;
  border-radius: 50%;
  animation: loader 2s linear infinite;
}

.loader:before {
  content: "";
  position: absolute;
  border: 3px solid #00F;
  left: 5px;
  right: 5px;
  top: 5px;
  bottom: 5px;
}

.loader:before {
  border: 3px solid transparent;
  border-top-color: #D4CC6A;
  border-bottom-color: #D4CC6A;
  border-radius: 50%;
  animation: loader 3s linear infinite;
}

.loader:after {
  content: "";
  position: absolute;
  border: 3px solid #0F0;
  left: 15px;
  right: 15px;
  top: 15px;
  bottom: 15px;
}

loader:after {
  border: 3px solid transparent;
  border-top-color: #84417C;
  border-bottom-color: #84417C;
  border-radius: 50%;
  animation: loader 1.5s linear infinite;
}

.loader:after {
  border: 3px solid transparent;
  border-top-color: #84417C;
  border-bottom-color: #84417C;
  border-radius: 50%;
  animation: loader 1.5s linear infinite;
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


JavaScript: 
$(window).on('load', function() {
  $('.loader').delay(1000).fadeOut();
  $('.preloader').delay(1000).fadeOut('slow');
})
Нажмите для раскрытия...
Куда вставлять это
 
Позитивный голос 0 Негативный голос
Позитивный голос 0 Негативный голос
Takamura_Mamoru написал(а):
Если актуально, через HTML как сделать эту загрузку меньше по времени?
Нажмите для раскрытия...
nikiatsh написал(а):
А если она долго грузит?
Нажмите для раскрытия...
В
JavaScript: 
$(window).on('load', function() {
  $('.loader').delay(1000).fadeOut();
  $('.preloader').delay(1000).fadeOut('slow');
})
Есть пункт delay, он по-моему ведет расчет в миллисекундах, дальше устанавливайте по своему вкусу, например 500 (0.5s)
 
Позитивный голос 0 Негативный голос
Войдите или зарегистрируйтесь для ответа.
Современный облачный хостинг провайдер | Aéza
Контакты
ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430 г. Краснодар, ул. Маяковского 160, офис 2.4
Назад
Сверху Снизу