Прелоадер для сайта на чистом JavaScript

Web Dev Tips

Подписаться 2,6 тыс.

Просмотров 3,7 тыс.

50% 1

Видео Поделиться Скачать Добавить в

Опубликовано:

31 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 14

@WebDevTips 4 года назад

Если у вас остались любые вопросы - пишите. Буду рад помочь)

@rockmayer8863 3 года назад

Спасибо большое, твой видос очень помог. Обычно все с чистого листа начинают, а тут как раз на готовый сайт накладывается.

@WebDevTips 3 года назад

Спасибо за комментарий)

@sandusgoga9676 Год назад

Благодарю от души!!!

@pivkaa 4 года назад

Боже, спасибо, хорошо объяснил, продолжай в том же духе!!!

@WebDevTips 4 года назад

Спасибо)

@Po-faktuu.novosti 2 месяца назад

Класная работа братуха можешь на моём сайте добавить?

@restsheets2962 2 года назад

Спасибо

@pythonandjs6380 3 года назад

Круто спасибо, вопрос. Уменя Прелоад в page1, если я перехожу page2 и вернусть к page1 прелоад снова играеть , как сделать чтобы при возвращении не показивал прелоад. Заранее спасибо

@WebDevTips 3 года назад

Можно использовать куки или local storage. learn.javascript.ru/localstorage После первого захода создаем переменную со значением true (что наш прелоадер уже 1 раз показался). После этого помещаем переменную в local storage. При входе на страницу проверяем, есть ли переменная и её значение, если true - не показываем, если нет или false - показываем.

@littlecat8445 2 года назад

Привет. спасибо за код! Подскажите, пожалуйста, может кто сталкивался. Страница на пару секунд подгружается раньше, чем прелоадер. в чем проблема? Хотя на обычном шаблоне из 6 картинок все отлично работает. А на реальном лендинге появляется эта проблема.

@РеактивныйТащер 4 года назад

Да у меня чёт preloader не исчезает

@WebDevTips 4 года назад

Здравствуйте, можете залить ваш код на codepen.io?

@unv1able Год назад

Более простой и правильный вариант: HTML: CSS: .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #1b1f3d; z-index: 9999; &__object { left: 50%; margin-left: -20px; top: 50vh; margin-top: -20px; position: absolute; z-index: 19 !important; width: 40px; height: 40px; border: solid 4px transparent; border-top-color: #424c82 !important; border-left-color: #4f5a94 !important; border-radius: 50%; animation: rootPreloadSpinner .4s linear infinite } } @keyframes rootPreloadSpinner { 0% { transform: rotate(0); transform: rotate(0) } 100% { transform: rotate(360deg); transform: rotate(360deg) } } JS: window.onload = () => { const preloader = document.getElementsByClassName('preloader')[0]; preloader.style.display = 'None'; }