Загрузчик или предзагрузчик (англ. - loader, preloader) - это, как правило, анимированный объект в виде картинки или элементов + css-код, которые появляются перед тем, как загрузится изображение, часть контента или вся страница целиком.
Если раньше для этой цели использовали в основном анимированные GIF изображение, то сейчас вашему вниманию предлагается набор примеров с ресурса codepen.io, которые вы можете использовать на своем сайте.
В каждом примере вы можете переключиться на вкладку HTML и CSS, чтобы посмотреть, как он реализован. В том случае, если вы увидите вместо HTML код PUG, с которым вы не знакомы, нажмите на стрелку вверху справа на вкладке и выберите пункт "View compiled HTML". Аналогично для CSS при указании препроцессора SASS и LESS преобразуйте его в обычный CSS с помощью опции "View compiled CSS".
Простые предзагрузчики
Простые предзагрузчики реализуются обычно на основе простых фигур - прямоугольников, квадратов, кругов или треугольников, которые можно реализовать средствами HTML+CSS не особо сложным путем. Скопируйте нужный код, если вам понравился загрузчик и используйте его в своей работе.
Классический предзагрузчик от Web.dev
See the Pen CSS Loader by Elen (@ambassador) on CodePen.0
Три точки от Artem
See the Pen Bouncing loader w/ Sass mixins by Artem (@artyschein) on CodePen.0
Круглый предзагрузчик от Jon Kantner
See the Pen Growing/Shrinking Circle Preloader by Jon Kantner (@jkantner) on CodePen.0
И еще один от Artem
See the Pen One div preloader w/ pseudo class by Artem (@artyschein) on CodePen.0
Еще один круглый загрузчик от Ronny Siikaluoma
See the Pen NB Loader SVG animated in Pure CSS 2 by Ronny Siikaluoma (@siiron) on CodePen.0
Перемещающиеся квадраты от Nikolay Talanov
See the Pen Blocks Loader by Nikolay Talanov (@suez)
on CodePen.0
Круг и точки от Jon Marron
See the Pen Take on me loading circle by Jon Marron (@jon-marron) on CodePen.0
Предзагрузка результатов поиска от Milan Raring
See the Pen WiFi loader animation - Only CSS by Milan Raring (@milanraring) on CodePen.0
Загрузчик с логотипом программы Brackets.
В принципе, подойдет для любого сайта с IT-тематикой. Автор Naoya
See the Pen Brackets Logo Loading by Naoya (@nxworld) on CodePen.0
Разноцветные шары от Jon Kantner
See the Pen Ball Motion Preloader by Jon Kantner (@jkantner) on CodePen.0
Крутящиеся точки от Sikriti Dakua
See the Pen Weird Loader by Sikriti Dakua (@dev_loop) on CodePen.0
и бесконечные линии от Sikriti Dakua
See the Pen Loader by Sikriti Dakua (@dev_loop) on CodePen.0
Разноцветные линии с точками от Paul
See the Pen CSS preloader! by Paul (@Maseone)
on CodePen.0
И еще одни анимированные разноцветные линии от Nikolay Talanov
See the Pen Slinky Loader Pure CSS by Nikolay Talanov (@suez) on CodePen.0
Падающие точки от Sikriti Dakua
See the Pen Falling Dots by Sikriti Dakua (@dev_loop) on CodePen.0
"Длинный хвост" от Girish Sharma
See the Pen Single DIV Loading ring in Pure CSS by Girish Sharma (@grssam) on CodePen.0
Набор простых CSS-предзагрузчиков
Автор Jenning
See the Pen Simple CSS loaders by Jenning (@jenning) on CodePen.0
Набор предзагрузчиков от Steve Melcher
See the Pen CSS3 loading animations by Steve Melcher (@xixao) on CodePen.0
Разнообразное использование треугольников для загрузчиков от Jon Kantner
See the Pen Dual Triangle Preloaders by Jon Kantner (@jkantner) on CodePen.0
Разнообразные формы от Arafat Hussein
See the Pen CSS spinners by Arafat Hussein (@rfthusn) on CodePen.0
Набор простых форм для предзагрузки от Rosa
See the Pen CSS Loaders by Rosa (@RRoberts)
on CodePen.0
Волна и другие формы от Tobias. Есть даже пекман.
See the Pen Animated Preloader Collection by Tobias (@Tbgse) on CodePen.0
Спиннеры от Sikriti Dakua
See the Pen Simple Preloaders by Sikriti Dakua (@dev_loop) on CodePen.0
Набор загрузчиков от Sagee Conway
See the Pen Vintage Loaders by Sagee Conway (@saconway) on CodePen.0
Разный вид спиннера в зависимости от timing-function от joogl
See the Pen CSS loaders and timing functions by joogl (@joogl) on CodePen.0
SVG предзагрузчики
Круглые предзагрузчики от yoksel
See the Pen Thinking about SVG-preloaders by yoksel (@yoksel) on CodePen.0
Разнообразные по форме загрузчики от Nikhil Krishnan. В том числе и загрузчик в виде часов.
See the Pen SVG Loader Animation by Nikhil Krishnan (@nikhil8krishnan) on CodePen.0
Загрузчик в виде знака бесконечности от Nikolay Talanov
See the Pen CSS Only SVG Infinity Loader by Nikolay Talanov (@suez) on CodePen.0
"Прыгающий" предзагрузчик от Nikolay Talanov
See the Pen CSS Only SVG Jump Loader (based on codrops demo) by Nikolay Talanov (@suez) on CodePen.0
Перепрыгивающий круг от Nikolay Talanov
See the Pen Gooey balls loader (new one) by Nikolay Talanov (@suez) on CodePen.0
Различные формы от Aurer
See the Pen SVG Loading icons by Aurer (@aurer)
on CodePen.0
Текстовые загрузчики
Варианты текста Loading для отображения загрузки от Naoya
See the Pen CSS Text Loading by Naoya (@nxworld) on CodePen.0
Круговой текст Loading от Jon Kantner
See the Pen Text Ring Loading Animation by Jon Kantner (@jkantner) on CodePen.0
Цифры в текст от Nikolay Talanov
See the Pen Pure CSS SVG Countdown (Ready) by Nikolay Talanov (@suez) on CodePen.0
Текст в виде волны от Sikriti Dakua
See the Pen Wavy Loading Animation by Sikriti Dakua (@dev_loop) on CodePen.0
Предзагрузчики со сложной анимацией
Не только простыми формами можно отобразить процесс загрузки. Есть люди, которые серьезно подошли к этому процессу и готовы поделиться ими с вами.
Добавляющиеся блоки от Sikriti Dakua
See the Pen Loading #2 by Sikriti Dakua (@dev_loop) on CodePen.0
Бегущий человек от Aaron Iker
See the Pen Running man by Aaron Iker (@aaroniker) on CodePen.0
"Длинный кот" от Jon Kantner
See the Pen Longcat Spinner by Jon Kantner (@jkantner) on CodePen.0
Загрузка с грузовиком от Jon Kantner
See the Pen Dump Truck Loading Animation by Jon Kantner (@jkantner) on CodePen.0
3d загрузчики
Переключаемые кнопки от Jon Kantner
See the Pen Neumorphic Preloader by Jon Kantner (@jkantner) on CodePen.0
Шары от Jon Kantner
See the Pen Perspective Sphere Preloader by Jon Kantner (@jkantner) on CodePen.0
Анимация от Aaron Iker
See the Pen ∞ Loader animation by Aaron Iker (@aaroniker) on CodePen.0
Для ресторанов и кафе
Жарим блины во время загрузки контента с aqil
See the Pen 'Making pancake' loader by md aqil (@md-aqil) on CodePen.0
Предзагрузчик в виде кассеты от Jordano Aragão
See the Pen Loaders by Jordano Aragão (@jordanoaragao) on CodePen.0
Предзагрузчик для загрузки файлов
Предназначен для показа процесса загрузки какого-либо файла. Автор aaroniker
See the Pen Download progress animation by Aaron Iker (@aaroniker) on CodePen.0
