Прелоадеры для сайта на Tilda. Анимация загрузки страницы

17.10.2023

Введение

Сколько раз вы оказывались перед компьютерным экраном, с нетерпением ожидая загрузки веб-страницы? Наверное, каждый из нас сталкивался с этой популярной бедой интернет-путешествий. В этой статье мы поговорим о том, как создать прелоадеры для сайта на Tilda и придать вашему сайту долгожданный характер, добавив немного веселой анимации перед загрузкой страницы.

Что такое прелоадеры для сайта на Tilda

Прелоадеры — это герои незримой битвы с медленными интернет-соединениями. Они позволяют вашим посетителям увидеть некую анимацию, пока ваша страница загружается. Это не только делает процесс более приятным для пользователей, но и добавляет некий “вау-эффект” к вашему сайту.

Прелоадеры могут быть не только функциональными, но и добавить уникальный штрих к вашему сайту. Представьте, как было бы забавно, если бы ваш прелоадер был анимацией ваших продуктов или маленькими мультяшными персонажами, танцующими на экране. Добавьте к этому немного юмора, и вы удивите своих посетителей!

Как создать прелоадеры для сайта на Tilda

Добавить прелоадер на ваш сайт на Tilda легче, чем кажется. Просто следуйте инструкциям и выберите прелоадер, который соответствует вашему стилю. Затем настройте его в соответствии с вашими предпочтениями, и он станет незаменимым соратником в борьбе с бесконечной загрузкой.

Чтобы добавить прелоадер или анимацию загрузки страницы на свой тильда сайт, сделайте следующее:

Создайте html блок «Т123» в HEADER или FOOTER вашего сайта. Если у вас одностраничный сайт, то просто добавьте блок «Т123» после всех блоков на странице
В созданном html блоке нажмите на кнопку «Контент»
Вставьте код прелоадера в открывшееся окно html блока

Ниже представлены несколько вариантов анимации загрузки страницы (прелоадеры для сайта на Tilda):

Прелоадер для сайта на Tilda в виде вертикальных линий с анимацией

<style>
    .loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #318CE7; /* Цвет фона */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999; 
    }

    .loader,
    .loader:before,
    .loader:after {
        background: white; /* Цвет прелоадера */
        -webkit-animation: load1 1s infinite ease-in-out;
        animation: load1 1s infinite ease-in-out;
        width: 1em;
        height: 4em;
    }

    .loader {
        color: white; /* Цвет прелоадера */
        text-indent: -9999em;
        margin: 0 auto;
        position: relative;
        font-size: 11px;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

    .loader:before,
    .loader:after {
        position: absolute;
        top: 0;
        content: '';
    }

    .loader:before {
        left: -1.5em;
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .loader:after {
        left: 1.5em;
    }

    @-webkit-keyframes load1 {
        0%, 80%, 100% {
            box-shadow: 0 0;
            height: 4em;
        }

        40% {
            box-shadow: 0 -2em;
            height: 5em;
        }
    }

    @keyframes load1 {
        0%, 80%, 100% {
            box-shadow: 0 0;
            height: 4em;
        }

        40% {
            box-shadow: 0 -2em;
            height: 5em;
        }
    }
</style>
 <div class="loader-wrapper">
        <div class="loader">Loading...</div>
    </div>
<script>
        window.addEventListener("load", function () {
            var loader = document.querySelector(".loader-wrapper");
            loader.style.display = "none";
        });
    </script>

Прелоадеры в виде круга с плавной анимацией

<style>
.loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #318CE7; /* Цвет фона */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999; 
    }
.loader {
  overflow:hidden;
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #65abf8;
  background: -moz-linear-gradient(left, #65abf8 10%, rgba(101,171,248, 0) 42%);
  background: -webkit-linear-gradient(left, #65abf8 10%, rgba(101,171,248, 0) 42%);
  background: -o-linear-gradient(left, #65abf8 10%, rgba(101,171,248, 0) 42%);
  background: -ms-linear-gradient(left, #65abf8 10%, rgba(101,171,248, 0) 42%);
  background: linear-gradient(to right, #65abf8 10%, rgba(101,171,248, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #65abf8;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: white;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>
<div class="loader-wrapper">
        <div class="loader">Loading...</div>
    </div>
<script>
        window.addEventListener("load", function () {
            var loader = document.querySelector(".loader-wrapper");
            loader.style.display = "none";
        });
    </script>

<style>
.loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #318CE7; /* Цвет фона */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999; 
    }
.loader {
  color: #65abf8;
  font-size: 20px;
  margin: 100px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
@keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
</style>
<div class="loader-wrapper">
        <div class="loader">Loading...</div>
    </div>
<script>
        window.addEventListener("load", function () {
            var loader = document.querySelector(".loader-wrapper");
            loader.style.display = "none";
        });
    </script>

Загрузка сайта в стиле windows10

<style>
.loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #318CE7; /* Цвет фона */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999; 
    }
.loader {
  color: #65abf8;
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease;
  animation: load6 1.7s infinite ease;
}
@-webkit-keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
</style>
<div class="loader-wrapper">
        <div class="loader">Loading...</div>
    </div>
<script>
        window.addEventListener("load", function () {
            var loader = document.querySelector(".loader-wrapper");
            loader.style.display = "none";
        });
    </script>

Прелоадер для Tilda в стиле мобильной системы windows в виде горизонтальных точек с плавной анимацией

<style>
.loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #318CE7; /* Цвет фона */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999; 
    }
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: #65abf8;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
</style>
<div class="loader-wrapper">
        <div class="loader">Loading...</div>
    </div>
<script>
        window.addEventListener("load", function () {
            var loader = document.querySelector(".loader-wrapper");
            loader.style.display = "none";
        });
    </script>

Заключение

Прелоадеры для сайта на Tilda — это не просто инструмент, а способ сделать ваш сайт более интересным и дружелюбным для пользователей. Они придают вашей странице характер и уникальность, а также могут быть отличным источником юмора для вашей аудитории. Не бойтесь экспериментировать с прелоадерами – они могут стать вашими верными спутниками в мире веб-дизайна.

Смотрите обучающие видео уроки по Тильде тут

Читайте также: Пагинация в Tild a

Введение

Что такое прелоадеры для сайта на Tilda

Как создать прелоадеры для сайта на Tilda

Прелоадер для сайта на Tilda в виде вертикальных линий с анимацией

Прелоадеры в виде круга с плавной анимацией

Загрузка сайта в стиле windows10

Прелоадер для Tilda в стиле мобильной системы windows в виде горизонтальных точек с плавной анимацией

Заключение

Важно!

Вам также понравится

Как изменить полосу прокрутки в Tilda: подробный гайд

Автоматический скролл слайдер в Tilda. Улучшение пользовательского опыта на вашем веб-сайте

Анимация элементов по скроллу в Tilda. Эффект разлетающихся карточек