Загрузчик или предзагрузчик (англ. - 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.
Несколько измененный вариант от Chris Gannon
See the Pen Manual Loader by Chris Gannon (@chrisgannon) on CodePen.
Три точки от Artem
See the Pen Bouncing loader w/ Sass mixins by Artem (@artyschein) on CodePen.
Круглый предзагрузчик от Jon Kantner
See the Pen Growing/Shrinking Circle Preloader by Jon Kantner (@jkantner) on CodePen.
И еще один от Artem
See the Pen One div preloader w/ pseudo class by Artem (@artyschein) on CodePen.
Еще один круглый загрузчик от Ronny Siikaluoma
See the Pen NB Loader SVG animated in Pure CSS 2 by Ronny Siikaluoma (@siiron) on CodePen.
Перемещающиеся квадраты от Nikolay Talanov
See the Pen Blocks Loader by Nikolay Talanov (@suez) on CodePen.
Круг и точки от Jon Marron
See the Pen Take on me loading circle by Jon Marron (@jon-marron) on CodePen.
Круг и точки от Josetxu
See the Pen Dots & Ring Loader - CSS by Josetxu (@josetxu) on CodePen.
Предзагрузка результатов поиска от Milan Raring
See the Pen WiFi loader animation - Only CSS by Milan Raring (@milanraring) on CodePen.
Фигуры от AlexWarnes
See the Pen CSS Loading Animations by Alex (@AlexWarnes) on CodePen.
Загрузчик с логотипом программы Brackets.
В принципе, подойдет для любого сайта с IT-тематикой. Автор Naoya
See the Pen Brackets Logo Loading by Naoya (@nxworld) on CodePen.
Разноцветные шары от Jon Kantner
See the Pen Ball Motion Preloader by Jon Kantner (@jkantner) on CodePen.
Появляющиеся точки от Chris Gannon
See the Pen Grid Loader (React) by Chris Gannon (@chrisgannon) on CodePen.
Перескакивающие точки от того же автора.
See the Pen Hopdot Loader by Chris Gannon (@chrisgannon) on CodePen.
Еще один вариант.
See the Pen Leap Frog Loader by Chris Gannon (@chrisgannon) on CodePen.
Крутящиеся точки от Sikriti Dakua
See the Pen Weird Loader by Sikriti Dakua (@dev_loop) on CodePen.
и бесконечные линии от Sikriti Dakua
See the Pen Loader by Sikriti Dakua (@dev_loop) on CodePen.
Похожий загрузчик от Chris Gannon
See the Pen Knot Loader by Chris Gannon (@chrisgannon) on CodePen.
Разноцветные линии с точками от Paul
See the Pen CSS preloader! by Paul (@Maseone) on CodePen.
И еще одни анимированные разноцветные линии от Nikolay Talanov
See the Pen Slinky Loader Pure CSS by Nikolay Talanov (@suez) on CodePen.
Вращающаяся пилюля от Jon Kantner
See the Pen Realistic CSS Pill Animation by Jon Kantner (@jkantner) on CodePen.
И еще несколько прелоадеров от Jon Kantner
Близкий к классике
See the Pen Stunt Preloader by Jon Kantner (@jkantner) on CodePen.
Смайлик
See the Pen Smiley Preloader by Jon Kantner (@jkantner) on CodePen.
Круг с частицей, бьющей в стенки
See the Pen Loading Goes Off Track by Jon Kantner (@jkantner) on CodePen.
Компас
See the Pen Compass Preloader by Jon Kantner (@jkantner) on CodePen.
Бесконечность
See the Pen Infinity Preloader by Jon Kantner (@jkantner) on CodePen.
Корзина
See the Pen Shopping Cart Preloader by Jon Kantner (@jkantner) on CodePen.
Чашка кофе
See the Pen Stretchy Coffee (Chrome & FF Only) by Jon Kantner (@jkantner) on CodePen.
Хомяк
See the Pen Hamster by Jon Kantner (@jkantner) on CodePen.
Книга
See the Pen Book Preloader by Jon Kantner (@jkantner) on CodePen.
Снежный ком
See the Pen Snowball Preloader by Jon Kantner (@jkantner) on CodePen.
Лего
See the Pen LEGO Preloader by Jon Kantner (@jkantner) on CodePen.
3D Preloader
See the Pen 3D Preloader by Jon Kantner (@jkantner) on CodePen.
Банановая "машина" от Chris Gannon
See the Pen Banana Car by Chris Gannon (@chrisgannon) on CodePen.
Падающие точки от Sikriti Dakua
See the Pen Falling Dots by Sikriti Dakua (@dev_loop) on CodePen.
"Длинный хвост" от Girish Sharma
See the Pen Single DIV Loading ring in Pure CSS by Girish Sharma (@grssam) on CodePen.
Круг-квадрат от Chris Gannon
See the Pen Squircle Loader by Chris Gannon (@chrisgannon) on CodePen.
И вариант попроще.
See the Pen Shape Snake by Chris Gannon (@chrisgannon) on CodePen.
Круг с текстом от dustin
See the Pen CSS Loader by dustin (@dustindwayne) on CodePen.
Набор простых CSS-предзагрузчиков
Автор Jenning
See the Pen Simple CSS loaders by Jenning (@jenning) on CodePen.
Набор предзагрузчиков от Steve Melcher
See the Pen CSS3 loading animations by Steve Melcher (@xixao) on CodePen.
Разнообразное использование треугольников для загрузчиков от Jon Kantner
See the Pen Dual Triangle Preloaders by Jon Kantner (@jkantner) on CodePen.
Разнообразные формы от Arafat Hussein
See the Pen CSS spinners by Arafat Hussein (@rfthusn) on CodePen.
Набор простых форм для предзагрузки от Rosa
See the Pen CSS Loaders by Rosa (@RRoberts) on CodePen.
Волна и другие формы от Tobias. Есть даже пекман.
See the Pen Animated Preloader Collection by Tobias (@Tbgse) on CodePen.
Спиннеры от Sikriti Dakua
See the Pen Simple Preloaders by Sikriti Dakua (@dev_loop) on CodePen.
Набор загрузчиков от Sagee Conway
See the Pen Vintage Loaders by Sagee Conway (@saconway) on CodePen.
Анимированные боксы от Dev Loop
Вариант загрузки основан на hml, css-стилях и css-переменных.
See the Pen Loading #2 by Dev Loop (@dev_loop) on CodePen.
Разный вид спиннера в зависимости от timing-function от joogl
See the Pen CSS loaders and timing functions by joogl (@joogl) on CodePen.
SVG предзагрузчики
Круглые предзагрузчики от yoksel
See the Pen Thinking about SVG-preloaders by yoksel (@yoksel) on CodePen.
Точки от Chris Gannon
See the Pen ShuffleQueue Loader by Chris Gannon (@chrisgannon)on CodePen.
Разнообразные по форме загрузчики от Nikhil Krishnan. В том числе и загрузчик в виде часов.
See the Pen SVG Loader Animation by Nikhil Krishnan (@nikhil8krishnan) on CodePen.
Загрузчик в виде знака бесконечности от Nikolay Talanov
See the Pen CSS Only SVG Infinity Loader by Nikolay Talanov (@suez) on CodePen.
"Прыгающий" предзагрузчик от Nikolay Talanov
See the Pen CSS Only SVG Jump Loader (based on codrops demo) by Nikolay Talanov (@suez) on CodePen.
Перепрыгивающий круг от Nikolay Talanov
See the Pen Gooey balls loader (new one) by Nikolay Talanov (@suez) on CodePen.
Различные формы от Aurer
See the Pen SVG Loading icons by Aurer (@aurer) on CodePen.
Звездное небо от Chris Gannon
See the Pen Light Rider by Chris Gannon (@chrisgannon)on CodePen.
Спутник от Chris Gannon
See the Pen Space Loader by Chris Gannon (@chrisgannon) on CodePen.
3D плюс от Chris Gannon
See the Pen Snake on Planes by Chris Gannon (@chrisgannon) on CodePen.
Рождественский загрузчик от Chris Gannon
See the Pen Christmas Loader by Chris Gannon (@chrisgannon)on CodePen.
Ледяной предзагрузчик от Chris Gannon
See the Pen Frosted Glass loader by Chris Gannon (@chrisgannon) on CodePen.
Капельный загрузчик от Chris Gannon
See the Pen SVG Drip Loader by Chris Gannon (@chrisgannon) on CodePen.
Соединяющиеся круги от Chris Gannon
See the Pen CurveBall by Chris Gannon (@chrisgannon) on CodePen.
Бесконечность от Chris Gannon
See the Pen Infinity Switch by Chris Gannon (@chrisgannon) on CodePen.
Droplet Loader от Chris Gannon
See the Pen Droplet Loader by Chris Gannon (@chrisgannon) on CodePen.
Pacman Loader от Chris Gannon
See the Pen Pacman Loader by Chris Gannon (@chrisgannon) on CodePen.
Брызги, лужи и кусочек радуги, наверное, от Chris Gannon
See the Pen Colour Diver - Smashing Live Demo by Chris Gannon (@chrisgannon) on CodePen.
Перемещающиеся линии от Chris Gannon
See the Pen Circuit loader by Chris Gannon (@chrisgannon) on CodePen.
Один перемещающийся квадраты от Chris Gannon
See the Pen Lazy Box by Chris Gannon (@chrisgannon)on CodePen.
Перемещающиеся квадраты от Chris Gannon
See the Pen QueueBox Loader by Chris Gannon (@chrisgannon) on CodePen.
Точки от Chris Gannon
See the Pen Swap Loader by Chris Gannon (@chrisgannon) on CodePen.
Спираль от Chris Gannon
See the Pen Spring Loader by Chris Gannon (@chrisgannon)on CodePen.
Текстовые загрузчики
Варианты текста Loading для отображения загрузки от Naoya
See the Pen CSS Text Loading by Naoya (@nxworld) on CodePen.
Круговой текст Loading от Jon Kantner
See the Pen Text Ring Loading Animation by Jon Kantner (@jkantner) on CodePen.
Цифры в текст от Nikolay Talanov
See the Pen Pure CSS SVG Countdown (Ready) by Nikolay Talanov (@suez) on CodePen.
Текст в виде волны от Sikriti Dakua
Загрузчик с использованием дополнительного js-скрипта Splitting. Текст можно изменить.
See the Pen Wavy Loading Animation by Sikriti Dakua (@dev_loop) on CodePen.
Предзагрузчики со сложной анимацией
Не только простыми формами можно отобразить процесс загрузки. Есть люди, которые серьезно подошли к этому процессу и готовы поделиться ими с вами.
Добавляющиеся блоки от Sikriti Dakua
See the Pen Loading #2 by Sikriti Dakua (@dev_loop) on CodePen.
Бегущий человек от Aaron Iker
See the Pen Running man by Aaron Iker (@aaroniker) on CodePen.
"Длинный кот" от Jon Kantner
See the Pen Longcat Spinner by Jon Kantner (@jkantner) on CodePen.
Загрузка с грузовиком от Jon Kantner
See the Pen Dump Truck Loading Animation by Jon Kantner (@jkantner) on CodePen.
Хороший вариант для сайта путешественников от Chris Gannon
See the Pen Like Cycle by Chris Gannon (@chrisgannon) on CodePen.
3d загрузчики
Переключаемые кнопки от Jon Kantner
See the Pen Neumorphic Preloader by Jon Kantner (@jkantner) on CodePen.
Шары от Jon Kantner
See the Pen Perspective Sphere Preloader by Jon Kantner (@jkantner) on CodePen.
Анимация от Aaron Iker
See the Pen ∞ Loader animation by Aaron Iker (@aaroniker) on CodePen.
Для ресторанов и кафе
Жарим блины во время загрузки контента с aqil
See the Pen 'Making pancake' loader by md aqil (@md-aqil) on CodePen.
Предзагрузчик в виде кассеты от Jordano Aragão
See the Pen Loaders by Jordano Aragão (@jordanoaragao) on CodePen.
Веселый 3D апельсин от Chris Gannon
See the Pen 3D SVG Orange by Chris Gannon (@chrisgannon) on CodePen.
Предзагрузчик для загрузки файлов
Предназначен для показа процесса загрузки какого-либо файла. Автор aaroniker
See the Pen Download progress animation by Aaron Iker (@aaroniker) on CodePen.
И еще один от Chris Gannon
See the Pen Download Icon by Chris Gannon (@chrisgannon) on CodePen.
