URL скопирован в буфер обмена!
0%
Как сделать прелоадер с анимацией и процентами загрузки?
При помощи данной модификации можно сделать анимированный прелоадер на css, который будет исчезать после загрузки страницы. Дополнительно можно выводить свой текст или счетчик в виде процентов. Прелоадер работает стабильнее чем аналоги на Zero Block.
Модификация работает с включенным Autoscale в блоках
Модификация работает с Zero Block и стандартными блоками
Номер модификации в библиотеке TiCode
Модификация обновлена. Добавлена возможность выбрать анимацию при исчезновении прелоадера.
Цвет фона
Показывать прелоадер
Тип прелоадера
Текст прелоадера
Цвет текста
Размер текста
Анимация при исчезновении
Настройки анимации
Цвет подложки круга
Цвет ползунка круга
Настройки процентов
Цвет процентов
Размер процентов
Скорость процентов
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD062--><style>
.TiPreloaderContainer {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background-color: #f96855;
z-index: 999999;
transition: transform 0.5s ease-in-out;
}
.TiCodeLoader {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.TiCodeText {
margin-top: 15px;
font-family: 'Arial', Arial, sans-serif;
color: #ffffff;
font-size: 16px;
text-align: center;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.TCSpinner {
display: flex;
align-items: center;
justify-content: center;
border: 8px solid #F6F4F0;
border-top: 8px solid #f7d5ce;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
.TiCodePercentage {
margin-top: 15px;
font-family: 'Arial', Arial, sans-serif;
color: #ffffff;
font-size: 20px;
text-align: center;
}
</style>
<div class="TiPreloaderContainer" id="TCContainer">
<div class="TiCodeLoader">
<div class="TCSpinner"></div>
<div class="TiCodePercentage" id="TIPercentage">0%</div>
<div class="TiCodeText"></div>
</div>
</div>
<script>
let TiCodePercentage = 0;
const TCLoadingPercentage = document.getElementById('TIPercentage');
const TCContainer = document.getElementById('TCContainer');
if (!sessionStorage.getItem('loaderShown')) {
function TCUpdatePercentage() {
document.body.style.overflow = "hidden";
if (TiCodePercentage <= 100) {
TCLoadingPercentage.textContent = `${TiCodePercentage}%`;
TiCodePercentage++;
setTimeout(TCUpdatePercentage, 10);
} else {
setTimeout(() => {
TCContainer.style.display = "none";
document.body.style.overflow = "auto";
}, 500);
}
}
TCUpdatePercentage();
} else {
TCContainer.style.display = "none";
document.body.style.overflow = "auto";
}
</script>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Указываем настройки в генераторе кода:
Цвет фона - указываем цвет фона прелоадера;
Показывать прелоадер - "Всегда": прелоадер будет отображаться постоянно при каждом переходе или обновлении страницы. "Раз при сессии": прелоадер будет показан только один раз при первом посещении. При обновлении страницы или повторном посещении прелоадер не появится. Повторный показ возможен только после того, как пользователь закроет вкладку сайта и снова откроет ее;
Тип прелоадера - указываем какой контент нужно выводить в прелоадер;
Текст прелоадера - можно указать свой текст который будет выводить под анимацией;
Размер текста - указываем размер текста. Стоит учесть что для пк и мобилок размер текста одинаковый;
Анимация при исчезновении - можно выбрать анимацию, которую проиграет при достижении 100%. Например сдвиг прелоадера вверх. Если выключено, то при достижении 100% прелоадер будет удалятся при помощи изменения прозрачности;
Настройки анимации:
Цвет подложки круга - указываем цвет подложки круга;
Цвет ползунка круга - указываем цвет ползунка круга;
Настройки анимации:
Цвет процентов - указываем цвет процентов;
Размер процентов - указываем размер процентов;
Скорость процентов - настраиваем скорость обновления процентов.
2. Копируем готовый код и вставляем в HTML блок Т123. Блок Т123 вставляем в самом верху страницы.
Цвет фона - указываем цвет фона прелоадера;
Показывать прелоадер - "Всегда": прелоадер будет отображаться постоянно при каждом переходе или обновлении страницы. "Раз при сессии": прелоадер будет показан только один раз при первом посещении. При обновлении страницы или повторном посещении прелоадер не появится. Повторный показ возможен только после того, как пользователь закроет вкладку сайта и снова откроет ее;
Тип прелоадера - указываем какой контент нужно выводить в прелоадер;
Текст прелоадера - можно указать свой текст который будет выводить под анимацией;
Размер текста - указываем размер текста. Стоит учесть что для пк и мобилок размер текста одинаковый;
Анимация при исчезновении - можно выбрать анимацию, которую проиграет при достижении 100%. Например сдвиг прелоадера вверх. Если выключено, то при достижении 100% прелоадер будет удалятся при помощи изменения прозрачности;
Настройки анимации:
Цвет подложки круга - указываем цвет подложки круга;
Цвет ползунка круга - указываем цвет ползунка круга;
Настройки анимации:
Цвет процентов - указываем цвет процентов;
Размер процентов - указываем размер процентов;
Скорость процентов - настраиваем скорость обновления процентов.
2. Копируем готовый код и вставляем в HTML блок Т123. Блок Т123 вставляем в самом верху страницы.
Обновите страницу чтобы увидеть Preloader
