Как сделать анимированный preloader для сайта HTML, CSS & JavaScript jQuery || Animated preloader JS

Всем привет!

В этом видео вы узнаете, как сделать такой вот прелоадер для сайта, используя HTML, CSS и JavaScript шаг за шагом.

Если вам понравится данное видео, поставьте пожалуйста лайк и напишите комментарий в поддержку.

Это способствует развитию канала.

А также можете поддержать автора донатом.

Ссылку оставлю вверху справа.

Спасибо!

И приятного просмотра.

Итак, приступим к созданию прелоудера для сайта.

У нас есть файл index.html, style.css, стили подключены, также подключены шрифты и в стилях добавлены простые обнуляющие стили.

Теперь давайте внутри в body добавим разметку.

Создадим идентификатор с названием preloader.

И внутри него у нас будет размещаться.

Будут блоки.

Это будет div.

И их будет у нас 7 этих блоков.

И сколько мы будем добавлять слова loading.

Каждый из этих блоков нам нужно добавить отдельно по букве.

Добавляем туда.

Эти буквы.

Теперь откроем страницу в браузере и посмотрим, что у нас добавилось.

Итак, как мы видим, есть наш контент.

Теперь давайте свернем браузер и Visual Studio Code, чтобы лучше было видно, что меняется на странице.

Перейдем в стили.

В стилях нам нужно обратиться к идентификатору Reloader.

И для него нам нужно указать Background Color.

Делаем теплого цвета.

Укажем Position Fixed.

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

Итак, для этого нам нужно указать Top 0, Right 0, Bottom 0 и Left 0.

Как мы видим, этот элемент теперь перекрывает все остальные.

Затем нам нужно еще также указать Z-индекс.

Укажем 100, чтобы также он был поверх остальных элементов.

Изменим font-size на 50 пиксель, увеличим размер, Shift-A.

И также размещение сделаем по центру, укажем Display Flex, Justify Content Center и Align Items Center.

Теперь обратимся к Preloader и к блокам.

Для них укажем Color и изменим его на тот же Blue, синий такой вот цвет.

Добавим разворот с помощью свойства Transform, Rotate.

На 180 градусов.

Также нам нужно указать.

Position.

Absolute.

Абсолютное позиционирование.

И добавить.

Свойство Opacity.

Чтобы скрыть эти элементы.

И также нам нужно еще добавить.

Свойство Animation.

Объединенное свойство Animation.

Куда мы добавим Animation Name.

Будет.

Название для анимации.

Move.

Продолжительность 3 секунды.

Скорость будет линейная.

И укажем.

Также чтобы.

Это все.

было по бесконечному циклу.

Затем нам нужно обратиться к Preloader, к блоку и добавить в сервер класс DTIChild.

Обратимся к второму элементу и нам нужно сюда добавить AnimationDelay, задержку для каждой из этих букв.

Итак, для второго элемента у нас будет задержка на 0.2 секунды.

Теперь давайте скопируем еще раз эти буквы.

Элементы здесь заменим ntl.child на третий и будет у нас шаг идти в 0.2 секунды, то есть для третьего элемента будет 0.4, для четвертого соответственно 0.6, для пятого 8, для шестого 1 секунда и 1.2 для седьмого элемента.

Теперь нам нужно сделать так, чтобы у нас это все анимировалось.

Добавляем правило keyframes, вместо identifier вставляем название анимации, чтобы конкретно к этим элементам у нас все применялось.

И добавим ключевые кадры, 0% укажем.

Следующее свойство и значение будет left 0, opacity 0.

Для 35% укажем left 41% и transform.

добавим Transform Rotate на 0 градусов и укажем Opacity 1, чтобы элемент у нас открывался.

Как мы видим, есть у нас уже вот такая вот анимация.

Затем нам нужно еще добавить ключевой кадр для 65%.

Здесь укажем Left 59%, смещение будет.

И отсюда можем скопировать эти свойства и значения, вставить их также сюда.

Теперь для Start

процентов последний ключевой кадр здесь укажем left 100 здесь будет смещение на 100 процентов и здесь нам нужно поменять на минус 180 градусов разворот и чтобы элемент у нас также исчезал opacity будет 0 так давайте откроем страницу видим есть такой вот у нас анимированный эффект для нашего слова loading в принципе этот эффект можно использовать

Не только для прелоудера, но и для заголовков на сайте, например, или для логотипа и так далее.

То есть, в принципе, выбор большой, как его можно использовать, эту вот анимацию.

Так, теперь давайте добавим, соответственно, чтобы это работало для прелоудера.

Нам нужно перейти в индекс HTML и здесь ниже добавим библиотеку чекуарии, укажем чекуарий link.

и сюда нам нужно ее подключить переходим на сайт который называется cgnjs.com content delivery network и здесь в поиске вводим ключевое слово query находим нашу библиотеку и отсюда копируем этот url и сюда нам нужно указать скрипт и в атрибут crc добавить эту вот ссылку которую мы скопировали чтобы подключить

соответственно эту библиотеку затем здесь ниже добавляем так скрипт и внутри нам нужно прописать следующий скрипт обращаемся указываю window он то есть будет у нас при загрузке здесь внутри через запятую добавляю функцию function и внутри нам нужно

указать обратиться к элементу идентификатора preloader и укажем fade out чтобы элемент у нас сгасал скажем так в течение продолжительности 7 секунд 7000 это 7000 миллисекунд соответственно 7 секунд давайте откроем страницу

Обновим ее.

Как мы видим, теперь у нас идет такая вот загрузка.

И в течение 7 секунд у нас откроется контент нашего сайта.

Давайте еще добавим для примера, для наглядности, контент какой-то.

Давайте, допустим, добавим заголовок второго типа.

Точнее, первого типа.

И укажем туда контент Hello.

И немного увеличим его в размере.

Обратимся к нему в стилях.

И укажем font-size 10 и W. Откроем страницу.

Допустим, у нас на сайте есть

какой-то контент, меню, home section и другие секции и так далее.

Когда мы загружаем наш сайт, у нас идет такой вот preloader с надписью loading, с таким вот анимационным эффектом.

И затем уже через течение 7 секунд это все исчезает и появляется основной контент нашего сайта.

Итак, в этом видео вы узнали, как сделать такой вот preloader для сайта анимированный, используя HTML, CSS

И JavaScript библиотеку Query шаг за шагом.

На этом все.

Спасибо за просмотр и успехов в обучении.

Если вам понравилось данное видео, ставьте лайк и подписывайтесь на мой канал.