Вы здесь: Главная » CSS » CSS анимация » Примеры загрузчиков для сайта с ресурса codepen

Примеры загрузчиков для сайта с ресурса codepen

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

Автор: Админ

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

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