Loading...

Как сделать анимированный прелоадер в TILDA?

С помощью нашей модификации ты можешь анимировать числа в Zero Block Тильда, задав начальные значения и скорость анимации.
Время настройки: 2 минуты
Генератор кода
Видео инструкция
Пример
Loading...
Инструкция
1. Выбираем понравившийся прелоадер;

2. Выбираем тип показа:

"Сайт доступен для взаимодействия" - сайт может быть не до конца загружен, время работы прелоадера указываете в поле "показать прелоадер";

"Полная загрузка" - прелоадер будет показываться пока сайт полностью не загрузится;

3. Настраиваем цвет прелоадера, фон и размер;

4. Копируем сгенерированный HTML код и вставляем его в блок Т123, сам блок T123 можно вставить на конкретную страницу или в шапку сайта;
Выберите прелоадер
Цвет прелоадера
Цвет фона
Размер прелоадера (font-size) (px)
Показывать прелоадер (сек.)
Копировать код<!-- Как сделать анимированный прелоадер в TILDA? -->
<!-- https://nolim.cc/preloader -->
<div class="nl_reploader_father"><div class="nl_preloader"><div class="loader">Loading...</div></div></div> <script> $(document).ready(function(){ setTimeout(function(){ $('.nl_reploader_father').fadeOut(); },3000); }); </script> <style> .nl_preloader{position:absolute;top:50%;left:50%;margin-right:-50%;transform:translate(-50%,-50%)}.nl_reploader_father{display:block;position:fixed;left:0;top:0;right:0;bottom:0;z-index:100005;width:100%;height:100%;background:#0058ff;z-index:9999999} .loader,.loader:after,.loader:before{background:#ffffff;-webkit-animation:load1 1s infinite ease-in-out;animation:load1 1s infinite ease-in-out;width:1em;height:4em}.loader{color:#ffffff;text-indent:-9999em;margin:88px auto;position:relative;font-size:11px;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation-delay:-.16s;animation-delay:-.16s}.loader:after,.loader:before{position:absolute;top:0;content:''}.loader:before{left:-1.5em;-webkit-animation-delay:-.32s;animation-delay:-.32s}.loader:after{left:1.5em}@-webkit-keyframes load1{0%,100%,80%{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}@keyframes load1{0%,100%,80%{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}} </style>
Код доступен только тем, кто оплатил подписку
Подписка стоит 390р./мес.
Покупая подписку, ты получаешь доступ ко всем уникальным модификациям
Ведутся технические работы((
Попробуйте перелогиниться, если не помогло, загляните к нам через 20 минут...
Подписка закончилась((
Нужно продлить, что бы получить доступ.
Так так так...
а этот генератор кода доступен только по подписке
Код доступен только тем, кто зарегистрирован
Зарегистрировавшись, ты получаешь доступ ко всем бесплатным модификациям
Made on
Tilda