Загрузчик или предзагрузчик (англ. - 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

Несколько измененный вариант от Chris Gannon

See the Pen Manual Loader by Chris Gannon (@chrisgannon) 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

Круг и точки от Josetxu

See the Pen Dots & Ring Loader - CSS by Josetxu (@josetxu) on CodePen.0

Предзагрузка результатов поиска от Milan Raring

See the Pen WiFi loader animation - Only CSS by Milan Raring (@milanraring) on CodePen.0

Фигуры от AlexWarnes

See the Pen CSS Loading Animations by Alex (@AlexWarnes) 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

Появляющиеся точки от Chris Gannon

See the Pen Grid Loader (React) by Chris Gannon (@chrisgannon) on CodePen.0

Перескакивающие точки от того же автора.

See the Pen Hopdot Loader by Chris Gannon (@chrisgannon) on CodePen.0

Еще один вариант.

See the Pen Leap Frog Loader by Chris Gannon (@chrisgannon) 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

Похожий загрузчик от Chris Gannon

See the Pen Knot Loader by Chris Gannon (@chrisgannon) 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

Вращающаяся пилюля от Jon Kantner

See the Pen Realistic CSS Pill Animation by Jon Kantner (@jkantner) on CodePen.0

И еще несколько прелоадеров от Jon Kantner

Близкий к классике

See the Pen Stunt Preloader by Jon Kantner (@jkantner) on CodePen.0

Смайлик

See the Pen Smiley Preloader by Jon Kantner (@jkantner) on CodePen.0

Круг с частицей, бьющей в стенки

See the Pen Loading Goes Off Track by Jon Kantner (@jkantner) on CodePen.0

Компас

See the Pen Compass Preloader by Jon Kantner (@jkantner) on CodePen.0

Бесконечность

See the Pen Infinity Preloader by Jon Kantner (@jkantner) on CodePen.0

Корзина

See the Pen Shopping Cart Preloader by Jon Kantner (@jkantner) on CodePen.0

Чашка кофе

See the Pen Stretchy Coffee (Chrome & FF Only) by Jon Kantner (@jkantner) on CodePen.0

Хомяк

See the Pen Hamster by Jon Kantner (@jkantner) on CodePen.0

Книга

See the Pen Book Preloader by Jon Kantner (@jkantner) on CodePen.0

Снежный ком

See the Pen Snowball Preloader by Jon Kantner (@jkantner) on CodePen.0

Лего

See the Pen LEGO Preloader by Jon Kantner (@jkantner) on CodePen.0

3D Preloader

See the Pen 3D Preloader by Jon Kantner (@jkantner) on CodePen.0

Банановая "машина" от Chris Gannon

See the Pen Banana Car by Chris Gannon (@chrisgannon) 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

Круг-квадрат от Chris Gannon

See the Pen Squircle Loader by Chris Gannon (@chrisgannon) on CodePen.0

И вариант попроще.

See the Pen Shape Snake by Chris Gannon (@chrisgannon) on CodePen.0

Круг с текстом от dustin

See the Pen CSS Loader by dustin (@dustindwayne) 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

Анимированные боксы от Dev Loop

Вариант загрузки основан на hml, css-стилях и css-переменных.

See the Pen Loading #2 by Dev Loop (@dev_loop) on CodePen.18892

Разный вид спиннера в зависимости от 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

Точки от Chris Gannon

See the Pen ShuffleQueue Loader by Chris Gannon (@chrisgannon)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

Звездное небо от Chris Gannon

See the Pen Light Rider by Chris Gannon (@chrisgannon)on CodePen.0

Спутник от Chris Gannon

See the Pen Space Loader by Chris Gannon (@chrisgannon) on CodePen.0

3D плюс от Chris Gannon

See the Pen
Snake on Planes
by Chris Gannon (@chrisgannon)
on CodePen.0

Рождественский загрузчик от Chris Gannon

See the Pen Christmas Loader by Chris Gannon (@chrisgannon)on CodePen.0

Ледяной предзагрузчик от Chris Gannon

See the Pen Frosted Glass loader by Chris Gannon (@chrisgannon) on CodePen.0

Капельный загрузчик от Chris Gannon

See the Pen SVG Drip Loader by Chris Gannon (@chrisgannon) on CodePen.0

Соединяющиеся круги от Chris Gannon

See the Pen CurveBall by Chris Gannon (@chrisgannon) on CodePen.0

Бесконечность от Chris Gannon

See the Pen Infinity Switch by Chris Gannon (@chrisgannon) on CodePen.0

Droplet Loader от Chris Gannon

See the Pen Droplet Loader by Chris Gannon (@chrisgannon) on CodePen.0

Pacman Loader от Chris Gannon

See the Pen Pacman Loader by Chris Gannon (@chrisgannon) on CodePen.0

Брызги, лужи и кусочек радуги, наверное, от Chris Gannon

See the Pen Colour Diver - Smashing Live Demo by Chris Gannon (@chrisgannon) on CodePen.0

Перемещающиеся линии от Chris Gannon

See the Pen Circuit loader by Chris Gannon (@chrisgannon) on CodePen.0

Один перемещающийся квадраты от Chris Gannon

See the Pen Lazy Box by Chris Gannon (@chrisgannon)on CodePen.0

Перемещающиеся квадраты от Chris Gannon

See the Pen QueueBox Loader by Chris Gannon (@chrisgannon) on CodePen.0

Точки от Chris Gannon

See the Pen Swap Loader by Chris Gannon (@chrisgannon) on CodePen.0

Спираль от Chris Gannon

See the Pen Spring Loader by Chris Gannon (@chrisgannon)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

Загрузчик с использованием дополнительного js-скрипта Splitting. Текст можно изменить.

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

Хороший вариант для сайта путешественников от Chris Gannon

See the Pen Like Cycle by Chris Gannon (@chrisgannon) 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

Веселый 3D апельсин от Chris Gannon

See the Pen 3D SVG Orange by Chris Gannon (@chrisgannon) on CodePen.0

Предзагрузчик для загрузки файлов

Предназначен для показа процесса загрузки какого-либо файла. Автор aaroniker

See the Pen Download progress animation by Aaron Iker (@aaroniker) on CodePen.0

И еще один от Chris Gannon

See the Pen Download Icon by Chris Gannon (@chrisgannon) on CodePen.0

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *