Кастомизируем Блок T333 индикатор прокрутки страницы в TILDA

Меняем расположение индикатора загрузки, ширину, высоту, цвет фона, прозрачность, скругление, расстояние от края экрана

Время настройки: 2 минуты

Генератор кода

Видео

Инструкция

1. Создайте блок T333 - обязательно поставьте его в самый низ страницы или в подвал.
Настройте там цвет индикатора;

2. Выбираем положение индикатора в генераторе;

3. Настраиваем стили (Прозрачность, скругление, ширина, цвет фона);

4. Настраиваем длину в процентах и отступы. Отступы можно задать в px или в %
Если выбрать длину 100% - отступы будут равны нулю, а длина всегда 100%;

5. Настраиваем показ в мобильной версии: Видимость и отступы;

6. Добавляем блок Т123 и вставляем в него сгенерированный HTML код;

Копировать код<!-- Кастомизация индикатора прокрутки страницы в TILDA -->
<!-- https://nolim.cc/scroll-indicator-tilda -->
<style> .t602 { opacity: 1; pointer-events:none; } .t602__indicator { transition: height .6s ease, width .6s ease; top: unset!important; right: 5%; top: calc(50% - 35%); width: 4px; max-height: 70%; border-radius: 50px; } .myscroll { right: 5%; top: calc(50% - 35%); height: 70%; background-color: #000000; position: fixed; z-index: 99998; border-radius: 50px; width: 4px; max-height: 70%; border-radius: 50px; } @media screen and (max-width:1200px){ .t602 { display: block; } .t602__indicator { right: 5%; } .myscroll { right: 5%; } } </style> <script> function t602_setProgressBarWidth2(recid) { var t602_windowScrollTop = $(window).scrollTop() , t602_docHeight = $(document).height() , t602_winHeight = $(window).height(); t602_scrollPercent = (t602_windowScrollTop / (t602_docHeight - t602_winHeight)) * 70; $(".t602__indicator").css('height', t602_scrollPercent + '%'); } setInterval(function(){ t602_setProgressBarWidth = t602_setProgressBarWidth2; },500); $(document).ready(function(){ var b = '<div class="myscroll"></div>'; $(b).insertAfter('.t602__indicator') }); </script>