Как сделать прелоадер? ► CSS/JS

Канал DWS TV: bit.ly/DWS_TV
Урок для тех, кто хочет научиться делать прелоадеры страниц.
►►► Второй канал Хауди, подпишись ;)
vk.cc/5lPADD
Человеческие цены на игры Steam и рандомы только тут - bit.ly/SteamAlm...
Хочешь зарабатывать на своих видео в KZbin?
Подключайся! - youpartnerwsp....
#Ссылки из видео:
1) github.com/Buc...
2) robinmastromari...
► Жми красную кнопку "Подписаться" под видео :)
► Есть вопрос? - Задай его лично мне в наших группах!
===
► Наша группа ВКОНТАКТЕ - howdyho_net
► Наш Twitter - howdyho_net
#Реквизиты для донатства | Поддержи канал!
Z252920168434
R250434217196
Музыкальный трек предоставлен KZbin Audio Library.

[@HowdyhoNet]

Канал DWS TV: bit.ly/DWS_TV Подписывайтесь, чтобы научиться делать крутые штуки на CSS!

[@user-py5ug2xg5m]

Хауди Хо™ - Просто о мире IT! , Хауди, почему я нахожусь в черном списке группы (Касимов Тимур, id tim4_morethannick)

[@Andrewgamingchannel]

Мы требуем видео урок о создании сайта с нуля!!! Хауди сделай это для нас!

[@Dan-rm3sl]

Нужно ли чтобы зарабатывать на программирование высшее образование "программиста" мне 13 я учу языки программирования но не уверен смогу ли я потом это использовать то есть примут меня куда то с знаниями но без диплома и так далее... ? О ХАУДИ ПРОСВЕТИ МЕНЯ :D

[@qwerty-qr3ku]

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

[@qwerty-qr3ku]

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

[@tvoyaeverngiyauspeha]

Спустя столько лет, а урок всё ещё остаётся на уровне.

[@user-cw6hs7xf9t]

Помоему хауди единственный человек на KZbin у кого реально полезная реклама!

[@user-eh1nj8el9l]

Спасибо Хауди, что красиво и доступно выложил!

[@HowdyhoNet]

Рад помочь!)

[@robg1425]

Ибро ты экстрасенс)) уже 2й раз я только начинаю искать что-то как ты выкладываешь то что нужно) спасибо)

[@HowdyhoNet]

=)

[@mrfriz]

После видео по вёрстке от профессионала на id'ах я не хотел вообще сюда возвращаться, но этот видос в корне изменил моё мнение. Хороший формат, полезная информация, спасибо!

[@demid088web]

Круто! Про document.images не знал...

[@freshawpcool624]

То чуство, когда нашёл хорошийканал при 14к подписчиках, а оглянулся и уже 116к.

[@HowdyhoNet]

=) Хорошие каналы всем нравятся.

[@spreeng]

Fresh AWPCool, на минуточку, 145.000

[@pltitsyn2587]

199к :)

[@Phpman-uq3oq]

204)

[@vseravnovoobwe]

228)

[@protovar.kz--8334]

Дай Бог тебе здоровья и хороших честных заработков!

[@meme_smiles]

Все по делу и понятно даже для далеких или любителей . Одна просьба тебе при желании выложи видео урок по доскам объявления что за что отвечает. Верхушку не прошу доклад. Сам к этой тематике не имею отношения просто хоби и подсел на твои видео единственные что не мусор. За ранее спасибо.

[@John-du4wf]

Спасибо те Хоуди Ха

[@Ivan-fairushin]

Не зря вам за рекламу платят!) Действительно интересно преподнес рекламу)

[@user-ke3cp6et2l]

насколько мощен и прекрасен JS... однозначно надо занести его в достижения человечества

[@Never_123]

Thank You Bro, Cool Video lesson)

[@dfm1301]

Сделай уроки по ООП PHP Только с твоих уроков смог понять python, php знаю, но никак не могу допереть ООП, а ты хорошо объясняешь

[@user-xw7pn9sf7h]

а что за закорючка перед .done в css??? и как ее написать?

[@user-ko7hu6eg6l]

нашёл ответ?

[@user-tx7jg1ei5k]

Спасибо большое Хауди! Ты лучший

[@HowdyhoNet]

Рад помочь!)

[@kirillkim6454]

Ну да, всё понятно, ничего сложного!

[@TolikM]

Две недели то му назад благодаря тебе я понял что это возможно и начал изучать html css Java.... Спасибо тебе за все уроки. Хочется как то раньше быть где-то там )) хотя мне кажется что в начале ещё интереснее чем на верху😂 мучительно как то и более сложнее...

[@HowdyhoNet]

Рад помочь!) Никогда не поздно начать.

[@TolikM]

Многие рады помочь но не всем правильно получается... мне 39 лет и я уверен на 100% что не поздно. Главное хотеть, задать себе цель, к тому же есть идея...а остальное что мне нужно благодаря твоему каналу можно получить, ну и конечно DWS TV! тоже всё адекватно и интересно... но вопросов полные карманы по ка что и ни на все Google находит ответы... так что буду мучить и доставать по не много ... 😅🙈

[@HowdyhoNet]

)))

[@user-nj6dh2ck2y]

​@@TolikM Толян, как успехи? Уже тимлид?

[@leksa_tvprivate_tv1914]

¡PERFECTNO WSE!PROSTO SUPER,BLAGODARJU OT SERDCA!!!

[@CoffeJava]

Лайк друзья, однозначно лайк!!!

[@zipponvr7043]

html - шаблон реально крутой

[@yodapunishes]

Оч круто, спасибо!!!

[@user-gt7oj2dj2e]

Респект и уважуха! Спасибо.

[@HowdyhoNet]

Рад помочь!)

[@qwerty-qr3ku]

Привет, сними пожалуйста видео про ОПП в php, как правильно пользоваться абстрактными классами, интерфейсами и третами. А то в основном в видео про них рассказывают самые основы, а применение не показывают.

[@nikolasoliynyk9728]

Спасибо парень за годный контент. Реально полезные вещи делаешь ))) С Уважением Dexter

[@user-ni3yh1wr8y]

Всё классно!!! Хауди Хо научи как сделать классную заставку при загрузке компа)

[@eternal7135]

Помогите, пожалуйста Uncaught TypeError: Cannot set property 'innerHTML' of null at Image.image_loaded (preloader.js:18)

[@mutant337]

Хауди Хо, привет! Очень нравится твой канал. Отличная и качественная подача, так держать! Подскажи пожалуйста, за сколько можно обучится на web-программиста и с какого периода обучения уже можно пробовать зарабатывать на фрилансе ( 3 месяца, полгода, 7 месяцев ). Заранее спасибо!

[@HowdyhoNet]

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

[@mutant337]

А как насчет верстальщика? С какого периода обучения можно начинать выполнять заказы?

[@vitalijslavrinovics8756]

Благодарю за урок. Только вот у меня на iPhone5S этот preloader часто не по центру почему-то показвается. Хотя код идентичен, только без препроцессоров...

[@cymbionic8096]

Помогите пожалуйста Uncaught TypeError: Cannot set property 'onload' of null at script.js:1

[@noiseless6800]

Без создания объекта image не работает но вопрос. Почему необходимо её создавать?

[@tteshka8784]

Привет, сделай обучающие видео по bootstrap за 1 час)

[@user-ke3cp6et2l]

просто начни делать... вот сайт русский: bootstrap-4.ru

[@max_coder8823]

Привет Хауди. Долго не мог разобраться, потом заметил что сам script в html прописываеться не в head а в body. Почему? В head вовсе не правильно вставлять скрипты или только в данном случае. P.S. Качество контента радует - кратко и лаконично, по делу.

[@Elite-wq3fg]

Круто

[@ilya_z12]

Привет Хауди, а ты когда под заказ верстаешь, ты эффекты сам на js/jq пишешь или используешь готовые плагины? Многие говорят, что 99% задач можно на плагинах собрать. И ещё вопрос. Будет ли у тебя видео про работу с отладчиком?

[@HowdyhoNet]

99% не соберёшь, не редко приходится самому писать. С отладчиком да, планируется ролик.

[@user-ve7gt5on6s]

Привет, было бы интересно увидеть реализацию неточного поиска, что то типа "Возможно вы имели ввиду"

[@DISSONANCE_0]

Хауди привет!!

[@HowdyhoNet]

Хай

[@LanakGaming]

Что в данном уроке нужно использовать? Хватит ли обычного js,html и css? Или все таки нужны дополнительные библиотеки, если да, то какие?

[@iceone913]

Хауди, я тебя уже очень долго смотрю, сначала пользовался Notepad++, ну когда смотрел видео "* за один час". А сейчас хочу спросить, какой у тебя стоит стиль на Sublime Text?

[@ushliypudge]

DWS тебе заплатили, или это твой партнёр? (я подписался на их канал:D)

[@HowdyhoNet]

Просто хороший знакомый, + у него ценный контент.

[@Amidman]

Хауди Хо™ - Просто о мире IT! годный контент всегда приветствуется

[@antontraceur]

можно как то включить в массив картинок диви с изображениями в кач фона ?

[@Feelosov]

loader не загружается. В консоли если смотреть, то его стили даже не появляются, при этом стили preloader грузятся. В чем может быть трабла? Gulp? SCSS? - У меня ничего из этого не стоит.

[@arbitr9305]

почему анимация прелоадера лагает в хроме, но норм работает в мозиле?

[@tmption]

Не исчезает preloader помогите.

[@druxavoron]

Наверное уже поздно, но если все еще нужно, то попробуй изменить document.body.onload на window.onload

[@imintegralmusic5501]

@@druxavoron или просто убрать значок & у класса done.

[@programmerprogrammer2036]

@@druxavoron я попробовал это, так и не помогло

[@VladOnon]

@@imintegralmusic5501 КРАСАВА!! СПАСИБО ОГРОМНОЕ!!!!

[@restsheets2962]

Он понятно объяснил, но настолько быстро, что новичку воооообще не получается с 1 раза сделать

[@vladimirtopchiy5187]

Что это за специальный символ перед обозначением класса done? 09:13 Возможно ли использование таблицы стилей css вместо scss? Как записать подкласс done?

[@mastodont252]

Код не рабочий, при условии, что я подчистую списал у тебя! Сайт прогружается, как будто прелоадера и нет! При этом все файлы подключил, синтаксис не нарушен! Просьба: скинь код в оригинале

[@antonnosoname3469]

Почему ты создаешь "клон" картинки, а не используешь просто images[i].onload и т.д.?

[@user-qq9rh2gi6i]

Anton NoSOname , IE не поддерживает.

[@excelente9842]

круто)

[@_Fantom_.]

Спасибо за урок! Плохо только, что счетчик процентов загрузки страницы слишком быстрый, практически моментальный..

[@demonics5151]

Uncaught TypeError: Cannot read properties of undefined (reading 'contains') что делать?

[@volodyashulgach3287]

не исчезает прелоадер

[@vladyslavmahonia2110]

НЕ пойму как работает у ХАуди, но вот моя правка document.body.onload = function(){ setTimeout( function() { var preloader = document.getElementById('page-preloader'); if(preloader.classList.contains('done')){ } else{ preloader.classList.add('done'); } }, 1000); };

[@vladyslavmahonia2110]

Забыл прописать return в условии if

[@vladyslavmahonia2110]

Также нашел ошибку...."недостает знака !"

[@robertaleksejev3995]

привет! скинь свой вк или ватсап скину другой код

[@timchannellive]

@@vladyslavmahonia2110 а что именно должно возвращать return?

[@user-gf2ki4fe6v]

Какая тема Sublime Text 3?

[@imCitRUS]

Го уроки NodeJS :)

[@user-wz9vl9li7q]

Отличный урок! Но гифки с прелоадером по указанному адресу уже нет. Может осталось у кого ребят?

[@antongrekov1879]

Почему надо обязательно создавать копию Image с помощью new Image() и вещать функцию на онлоад и онеррор. Почему нельзя написать for (let i = 0 ; I < total_image_count; i++) { images[i].onload = image_loaded; images[i].onerror = image_loaded; } ???

[@jonygaming10]

спс за бро мне помог. не хочешь сделать уроки про JAVA?

[@rasuljonbazarbayev9596]

а как убрать скролл в загрузочном окне ?

[@MOPE-B-CTAKAHE]

Как сделать так, чтобы пользователи не смогли выделить и/или скопировать какой то текст?

[@Amidman]

Konstantin Naumov спасибо за помощь

[@ded-pihto]

Konstantin Naumov, если применить "user-select: none;" можно ли скопировать текст с помощью F12?

[@Amidman]

John Casius с помощью F12 можно сделать очень многое... Вернее почти всё, кроме серверной стороны( пароли SQL, просто какие-то данные)

[@Specifica]

можно на js сделать function noCopy(event) { event.preventDefault(); } document.body.addEventListener("mousedown", noCopy); отменяет событие можно и на даблкликпоставить, и для опр элементов назначить и там не будет выделение работать

[@user-qn6ok5bm4p]

в гугл тяжко написать?

[@DANEX7799]

Спасибо за видео! Почему в данном случае используется CSS свойство visibility а не display ?

[@Specifica]

поч когда скрипт подключаешь просто не прописываешь в него defer тогда можно в head засунуть чтоб всё по красоте.

[@abandoned7501]

используй atom или vscode на linux

[@sonnyds4985]

Спасибо огромное, я уж начел сомневаться в том что я тут делаю:) Не мог бы ответить, что за SCSS или как ты его в комментах писал, и что он дает?

[@HowdyhoNet]

SCSS это препроцессор для языка CSS, увеличивающий сильно его возможности. Ты пишешь код на синтаксисе SCSS применяя все его плюшки, а он на выхлопе даёт готовый CSS.

[@sonnyds4985]

Хауди Хо™ - Просто о мире IT! А где его можно скачать, и как его установить?

[@HowdyhoNet]

Официальный сайт sass-lang.com, про установку и обзор у меня позже будет ролик.

[@sonnyds4985]

Хауди Хо™ - Просто о мире IT! Спасибо за все, Продолжай делать ролики, удачи:)

[@HowdyhoNet]

Рад помочь!)

[@user-lx5eu2jp4b]

у меня на мобильной версии, именно когда каждый раз вставляешь заново ссылку на мой сайт, то появляется этот бэкграунд с задержкой, не моментально, будто с opacity: 0.5; на opacity: 1; посмотрел в коде ничего в скрипте не задано анимацией, сам скрипт задавал в js без "загрузки страницы"

[@ninjaaa94]

Привет. Сделал тоже самое. И когда перезагружаю страницу, что бы посмотреть, сначала с самого видно весь сайт, потом плавно появляется наш fixed div и потом так же плавно пропадает. Как убрать то что бы с самого начала не было transition а при закрытии был?

[@Quadrad_s]

скажи пожалуйста как ты добавил карту кода в атом? справа как в sublime?

[@TheViXeo]

Привет. Что за плагин используется, с выпадающим списком вариаторов при вводе в sccs?

[@user-oq8vw6rs2k]

Не создаем класс в css, а обращаемся к нему!

[@Vitya952]

Привет, скажи, а чем отличается SCSS от обычного css? Зачем им пользоваться? Почему не используешь Sass? Я уверен ты знаешь о нем, расскажи какие минусы?

[@HowdyhoNet]

В будущем будет ролик о нём, небольшой.

[@nucknine]

SCSS - это и есть Sass

[@Vitya952]

Буду ждать, очень любопытно) Спасибо.

[@oregu]

Подскажите, пожалуйста, как использовать SCSS в проекте?

[@Kensidan]

почему ссылка ведет не на канал а на сушибар в краснадаре?

[@dmitriyavdeenko2132]

Хауди, вопрос, сделал js всё как на видео, но не понимаю чего не работает функция, выбивал в console.log всего изображений 39, загруженных = 0, если не сложно, можешь помочь?

[@antonfyduma7973]

Хауди на чем делать адаптив: резиновый сайт (но по-моему это не оч ) или медиазапросы или сетка на bootstrap или еще что-то

[@HowdyhoNet]

Медиазапросами. Сетка в Bootstrap это просто набор готовых медиазапросов и колонн.

[@XyberNike]

Лично я использую и медиазапросы и bootstrap )

[@user-mf1tg5km6z]

0:13 Игорь Овер?

[@force4717]

А где видосики! Уже почти месяц нет!

[@azelsky]

что делать если у меня все картинки заданы через background в css? ПРоблема в том что скрипт их не видит. Или их нужно передеть под тег img?

[@musicofgarrywood43]

Бро, ты можешь мне помочь. Я тут не понял, потому-что, у меня лоадер написан по другому

[@user-uu8rt4tf7l]

Не совсем понял что в цикле происходит :) Объяснить плз

[@it6706]

*Хауди сделай видео как сделать чат на сайте!*

[@AlehNavoyeu]

а можно как-нибудь сделать,чтобы на мобильных устройствах js файл не открывался, то есть с РС допустим грузит прелоадер, а с мобильного даже не залазит в этот js файл?заранее спасибо

[@_artkov_]

Не появляется GIF изображение, что делать?

[@user-lb4se7jb2x]

В консоле пишет ошибку с подключением а все верно подключено

[@HaykXachatryan-fy3xr]

Скажи, пожалуйста, какая тема у Sublime Text?

[@Name-cz7cd]

Привет. Не мог бы ты сделать видео на тему, как редактировать уже залитый сайт в интернет. Заранее спасибо)

[@user-qe1bl8ri4n]

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

[@HowdyhoNet]

+Bek Bekov Качество убивает любую конкуренцию.

[@arltan]

после добавления данного скрипта сама страница становится не кликабельной, т.к. у прелодера z-index = 2, предлагаю добавить строку после IF preloader.style.zIndex = '-1';

[@user-us2ku5ux2y]

а лучше удалить его со страницы, с помощью innerHTML например.

[@Sino999TJ]

сделай видео про Big Data

[@user-uw5ur1ij3c]

У меня проблема показывает 0 процентов а потом 100 и исчезает нет прогрузки процентов в чом проблема подскажите

[@dengleokai1928]

ариба мами на фоне играет)

[@user-sw9df4ng3c]

привет! как думаешь,в 30 не поздно начинать постирать программирование??? (спасибо за ответ) 😊

[@HowdyhoNet]

Не поздно, главное желание

[@user-gf2ki4fe6v]

Помогите! Что мне делать, у меня в Network нету Regular 3G

[@koststudio6173]

что это за значок перед .done

[@MrSaturn721]

Я тоже не понял

[@koststudio6173]

MrSaturn721 у меня кстати ничегошеньки не работает

[@MrSaturn721]

kost game у меня тоже почему то скрипт в браузере не работает с ошибкой синтаксиса. Не стал разбираться. Надо самому все учить.

[@timurbaymurzin8770]

это SASS,вы пишите как в обычном css - .done{...}

[@koststudio6173]

у меня итак ничего не работает

[@user-cw6hs7xf9t]

Хауди, посоветуй, пожалуйста, какую-нибудь литературу связанную с веб-программированием, для начинающих, заранее спасибо тебе.

[@HowdyhoNet]

Книги и курсы у нас в группе vk.com/topic-84392011_32960213

[@user-cw6hs7xf9t]

Хауди Хо™ - Просто о мире IT!, спасибо

[@csstricks6943]

Спасибо за урок, у меня возникла проблема с z-index , прилоадер перекрывает весь контент

[@user-ke3cp6et2l]

а не логичнее просто удалить div'ы прелоадера?

[@user-uv8tp8ho2b]

Хауди а как вы через еммет подвигаете столб в право или в лево ??

[@HowdyhoNet]

Нет, это возможность Sublime Text 3

[@mykhailokirovych4553]

что за версия линукса??

[@webzaytsev]

где можно взять код?

[@INTTable]

а как отключить скролл, здесь в примере фуллпейдж сайт скрола нет, а у меня скрол есть как отключить?

[@alioo9304]

body { overflow: hidden; }