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; } .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 { TCContainer.style.display = "none"; document.body.style.overflow = "auto"; } } TCUpdatePercentage(); } else { TCContainer.style.display = "none"; document.body.style.overflow = "auto"; } </script>
КОПИРОВАТЬ КОД
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Указываем настройки в генераторе кода:
Цвет фона - указываем цвет фона прелоадера;
Показывать прелоадер - "Всегда": прелоадер будет отображаться постоянно при каждом переходе или обновлении страницы. "Раз при сессии": прелоадер будет показан только один раз при первом посещении. При обновлении страницы или повторном посещении прелоадер не появится. Повторный показ возможен только после того, как пользователь закроет вкладку сайта и снова откроет ее;
Тип прелоадера - указываем какой контент нужно выводить в прелоадер;
Текст прелоадера - можно указать свой текст который будет выводить под анимацией;
Размер текста - указываем размер текста. Стоит учесть что для пк и мобилок размер текста одинаковый;

Настройки анимации:
Цвет подложки круга - указываем цвет подложки круга;
Цвет ползунка круга - указываем цвет ползунка круга;

Настройки анимации:
Цвет процентов - указываем цвет процентов;
Размер процентов - указываем размер процентов;
Скорость процентов - настраиваем скорость обновления процентов.

2. Копируем готовый код и вставляем в HTML блок Т123. Блок Т123 вставляем в самом верху страницы.
Обновите страницу чтобы увидеть Preloader
Made on
Tilda