Обзор анимации с codepen для страниц загрузки сайта

в 7:09, , рубрики: codepen, css, css3, html, javascript, web-разработка, Блог компании mr. Gefest, веб-дизайн, подборка, Разработка веб-сайтов

Обзор анимации с codepen для страниц загрузки сайта

Программисты проверяют идеи для сайтов на площадках: codepen, jsbin, jsfiddle, cssdesk. Потому что там они мгновенно видят результат написанного кода и могут показать его другим.

Codepen — одна из самых популярных. Там более 500 тыс. готовых решений. Из них половина — хлам: неэффективный код, не работают на планшетах и телефонах, не поддерживают все популярные браузеры. Надо потратить много часов на поиск идеи, которую можно использовать на своем сайте.

Я решил делать подборки полезных решений с codepen. Первую уже выпускал на хабре «Обзор многоуровневых меню». Теперь вторая — «Обзор анимации для страниц загрузки сайта».

Подборку разделил на 3 статьи.

Как подбирал

Решения с codepen я пропустил через 3 критерия:

  • качество кода и эффективность решения;
  • реальность применения на сайте;
  • работоспособность в браузерах на Windows, macOS, iOS, Android 3+ и Windows phone 8+.

Я выбрал 1440 решений codepen по запросу «Preloader». Пропустил их через первый и второй фильтр. Из 1440 осталось 465. В каждой статье проанализирую по 155 идей.

Если идею нельзя использовать в реальном проекте, она не работает в 2-3 браузерах, на планшете или телефоне и в ней используются медленный код — я её выкидываю. Поэтому из первых 155 дожило только 83.

P.S. Если хотите помочь в анализе оставшихся 310 идей для preloader-страниц, то напишите мне личным сообщением. У меня не хватает времени быстро их обработать из-за работы над Gefest IDE. А вместе мы сделаем это быстрее. Вклад каждого будет описан в статьях.

Решения

CSS

CSS

Круглые

Круглые

Circle Loader

Круглый preloader на css - Circle Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform rotate
  • transform scale
Single Element Spinner

Круглый preloader на css - Single Element Spinner

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform rotate
Loading animation

Круглый preloader на css - Loading animation

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac).

Использует технологии:

  • keyframes animation
  • transform translateX
  • radial-gradient
  • nth-child
  • gradient
Loading dots

Круглый preloader на css - Loading dots

Не достаточно эффективное решение из-за "> div > div".
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform rotate
Simple CSS3 Animation Example

Круглый preloader на css - Simple CSS3 Animation Example

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Opera, Safari (mac);

Использует технологии:

  • keyframes animation
  • transform rotate
  • calc
Single Element Spinners

Круглый preloader на css - Single Element Spinners

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: rotate
  • linear-gradient
  • box-shadow
  • rgba
XBox SmartGlass Loading Animation in CSS using 1 element

Круглый preloader на css - XBox SmartGlass Loading Animation in CSS using 1 element

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform rotateZ
  • calc
Pushing pixels css loader

Круглый preloader на css - Pushing pixels css loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • nth-of-type
Pure CSS Loader Ring of Light

Круглый preloader на css - Pure CSS Loader Ring of Light

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: rotate
  • box-shadow
Loading test

Круглый preloader на css - Loading test

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: scaleX
  • transform: scaleY
  • box-shadow
  • rgba
CSS3 Infinite Loader

Круглый preloader на css - CSS3 Infinite Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Opera, Safari (mac);
  • В Firefox глючит;
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: translateX
  • transform: rotate
  • transform: scale
  • last-child
Rainbow Infinity Loader

Круглый preloader на css - Rainbow Infinity Loader

Интересное решение, но неэффективное — из-за анимации css-свойства box-shadow.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: translateZ
  • transform: translate
  • transform: rotate
  • box-shadow
Loader wave

Круглый preloader на css - Loader wave

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: scale3d
  • base 64
Simple Loader

Круглый preloader на css - Simple Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera;
  • ie10+.

В Safari (mac) не работает.

Использует технологии:

  • keyframes animation
  • transform: translateY
  • transform: translateX
  • nth-child
  • calc
CSS3 Loading Spinner

Круглый preloader на css - CSS3 Loading Spinner

Простой код, но не достаточно эффективное решение из-за анимации css-свойств margin и box-shadow.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: translate
  • transform: rotate
CSS circle loaders

Круглый preloader на css - CSS circle loaders

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • font-smoothing: antialiased
  • keyframes animation
  • transform:rotate
eGzdI

Круглый preloader на css - eGzdI

Эффективное решение и простой код.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Opera, Safari (mac).

В IE и Firefox не работает.

Использует технологии:

  • keyframes animation
  • transform: rotate
  • linear-gradient
Pure CSS loader #2

Круглый preloader на css - Pure CSS loader #2

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

В Android 3.3+ не работает

Использует технологии:

  • keyframes animation
  • transform: translateX
  • transform: translate
  • transform: rotate
  • transform: scale
Simple CSS Loading

Круглый preloader на css - Simple CSS Loading

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform:rotate
  • linear-gradient
  • rgba
Simple single-element loading animation

Круглый preloader на css - Simple single-element loading animation

Простое и эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • edge+.

Использует технологии:

  • keyframes animation
  • transform: rotate
  • rgba
QdJjoa

Круглый preloader на css - QdJjoa

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

В Android 3.3+ не работает.

Использует технологии:

  • keyframes animation
  • transform: translateX
  • transform: translate
  • transform: rotate
Pure CSS 2D Spinning Loader

Круглый preloader на css - Pure CSS 2D Spinning Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: translateX
  • transform: scale
Loader

Круглый preloader на css - Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: translate
  • first-child
Single-Element Loader Mixins

Круглый preloader на css - Single-Element Loader Mixins

Некоторые решения эффективные, а некоторые — нет из-за анимации css-свойств: margin, border, text-shadow, border-radius, height, width и right.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: translateX
  • transform: rotateY
  • transform: rotate
  • rgba
Single Element Spinner

Круглый preloader на css - Single Element Spinner

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: rotate
  • linear-gradient
  • rgba
Earthworm loader

Круглый preloader на css - Earthworm loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Opera, Safari (mac);
  • ie10+.

В Firefox не работает.

Использует технологии:

  • keyframes animation
  • transform: rotate
Single-div loader

Круглый preloader на css - Single-div loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: translate
  • transform: scale
Minimal Throbbers

Круглый preloader на css - Minimal Throbbers

Простое и эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: rotateZ
Smooth Pulse

Круглый preloader на css - Smooth Pulse

Неэффективное из-за box-shadow, но красивое.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • box-shadow
  • nth-child
  • rgba

Квадратные

Квадратные

Rubik loader

Квадратный preloader на css - Rubik loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie7+.

Использует технологии:

  • transform: translate
  • gif
Loader

Квадратный preloader на css - Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform:rotateZ
  • nth-child
  • calc
CSS3 Transform Loader — squareception

Квадратный preloader на css - CSS3 Transform Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: translate
  • transform: scale
Line Loader

Квадратный preloader на css - Line Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • transform: scale
  • nth-child
CSS3 Loader — Audio effect

Квадратный preloader на css - CSS3 Loader

Решение красивое, но неэффективное из-за css-свойства height.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • nth-child
BoxShuffle

Квадратный preloader на css - BoxShuffle

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac).

В IE не работает.

Использует технологии:

  • keyframes animation
  • transform: translate3d
  • transform: translate
  • transform: rotateX
  • transform: rotateY
  • transform: rotateZ
  • transform: scaleZ
  • transform: scaleY
  • transform: scaleX
  • perspective
  • nth-child

Сборники

Сборники

Spinners using Font Icons

Сборник preloader на css - Spinners using Font Icons

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: rotate
  • font-smoothing
  • web-fonts
  • rgba
Loaders (WIP)

Сборник preloader на css - Loaders (WIP)

Часть решений эффективны, а часть — нет из-за анимации css-свойств: width, left, right и top.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform:rotate
  • nth-child
  • rgba
  • calc
CSS Loading Spinners

Сборник preloader на css - CSS Loading Spinners

Часть решений эффективны, а часть — нет из-за анимации css-свойств: height, border-radius, border, left и margin.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: translate
  • transform: rotate
  • nth-of-type
  • rgba
Pure CSS Loaders kit

Сборник preloader на css - Pure CSS Loaders kit

Не которые решения не эффективны из-за анимации css-свойств: left, right, width, box-shadow и height.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform:rotate
  • transform: scale
  • box-shadow
  • rgba

Необычные

Необычные

Preloader CSS

Необычный preloader на css - Preloader CSS

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • В Android 3.3+ нет гладкости анимации и закругления;
  • iOS 8+ и Windows phone 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: translate3d
  • transform: skew
Loading spinner

Необычный preloader на css - Loading spinner

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform rotate
Pixeden logo loading

Необычный preloader на css - Pixeden logo loading

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • В Android 3.3+ появляются две лишние линии;
  • iOS 8+ и Windows phone 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform:rotate
  • linear-gradient
  • nth-child
Spinner

Необычный preloader на css - Spinner

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: rotate
  • radial-gradient
  • base64 image
Lightsaber Fight Loader

Необычный preloader на css - Lightsaber Fight Loader

Неэффективное, но интересное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: translateY
  • transform: rotateZ
  • box-shadow
Code Loader

Необычный preloader на css - Code Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • transform: scale
  • display: flex
  • nth-child
CSS Stroke Loader Animation

Необычный preloader на css - CSS Stroke Loader Animation

Чистый код, но неэффективное решение из-за анимации css-свойства width.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

В Windows phone 8+ не работает.

Использует технологии:

  • keyframes animation
  • transform: rotate
#Codevember — Day 6 — Bookshelf loader

Необычный preloader на css - #Codevember - Day 6 - Bookshelf loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: translateX
  • transform: translate
  • transform: rotateZ
  • radial-gradient
  • nth-child
  • rgba
Helix Loader

Необычный preloader на css - Helix Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: translateY
  • transform: scale
  • last-child
  • nth-child
  • not
Daily UI #010: CSS 3 Loading

Необычный preloader на css - Daily UI #010: CSS 3 Loading

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: rotateX
  • transform: rotateY
  • transform: rotateZ
  • calc
One element four color loader

Необычный preloader на css - One element four color loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: translate
Helix Loader

Необычный preloader на css - Helix Loader

Не достаточно эффективное решение из-за анимации css-свойства left.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: translateX
  • transform:translateY
  • transform:rotate
  • transform:scaleX
  • nth-child
Loading Idea

Необычный preloader на css - Loading Idea

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: translate
  • nth-child
Loader css3

Необычный preloader на css - Loader css3

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Opera, Safari (mac).

В IE и Firefox не работает.

Использует технологии:

  • keyframes animation
  • transform: rotate
  • rgba
Daily UI #20 | CSS loader

Необычный preloader на css - Daily UI #20 | CSS loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • edge+.

Использует технологии:

  • keyframes animation
  • transform: translateX
  • transform: translate
DNA Loader

Необычный preloader на css - DNA Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: translateX
  • transform: translate
  • nth-child
Wave Loader

Необычный preloader на css - Wave Loader

Интересное решение, но неэффективное из-за анимации css-свойств: border-radius, left и top.
Сайт библиотеки.

Работает в браузерах:

  • Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

В Android 3.3+ не работает.

Использует технологии:

  • keyframes animation

CSS + Javascript

CSS + Javascript

Duwal

Preloader на css и js - Duwal

Решение эффективное. Js-код выполняется только при открытии: определяет расположение и скорость анимаци шариков.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • animate
  • js
Google Loading thingy

Preloader на css и js - Google Loading thingy

Не достаточно эффективное решение из-за анимации css-свойств: left и padding.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac).

В IE и Windows phone не работает.

Использует технологии:

  • keyframes animation
  • transform: translateX
  • transform: skewX
  • transform: scale
  • js
Crosshair loader

Preloader на css и js - Crosshair loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • edge+.

Использует технологии:

  • keyframes animation
  • transform: translate
  • transform: rotate
  • jquery
  • js
Space Junk preloader

Preloader на css и js - Space Junk preloader

Эффективное решение, но требует подключать тяжелый скрипт Tween max.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie9+.

Использует технологии:

  • transform: translate
  • TweenMax
  • jquery
  • js
Page Transition with Loader

Preloader на css и js - Page Transition with Loader

Эффективное решение, но требует подключать тяжелые скрипты: Tween max и CSSRulePlugin.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: translateY
  • transform: scaleY
  • CSSRulePlugin
  • TweenMax
  • jquery
  • js

CSS + Javascript + SVG

CSS + Javascript + SVG

SVG Loaders

Preloader на css, js и svg - SVG Loaders

Эффективное решение. При помощи GreenSock Animation Platform происходит анимация svg объектов.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie9+.

Использует технологии:

  • js (TweenMax + DrawSVGPlugin.js)
  • transform: translate
  • svg
House Loader

Preloader на css, js и svg - House Loader

Эффективное решение. При помощи GreenSock Animation Platform происходит анимация svg объектов.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie9+.

В Windows phone не работает

Использует технологии:

  • transform-style: preserve-3d;
  • TweenMax
  • svg
  • js
Prism Loading Screen

Preloader на css, js и svg - Prism Loading Screen

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+ и Windows phone 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

В iOS не работает.

Использует технологии:

  • keyframes animation
  • text-rendering: optimizeLegibility
  • requestAnimationFrame
  • transform: scale3d
  • transform: rotate
  • linear-gradient
  • particleground
  • lh-property: 0
  • svg
  • js
Bubble Loader

Preloader на css, js и svg - Bubble Loader

Решение не достаточно эффективное. Начальный перебор элементов svg объекта сделан плохо.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • transform: scale
  • TweenMax
  • svg
  • js
SVG Car Drift Loader

Preloader на css, js и svg - SVG Car Drift Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie9+.

Использует технологии:

  • MorphSVGPlugin
  • TweenMax
  • svg
  • js
Filler Loader

Preloader на css, js и svg - Filler Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • transform: rotate
  • DrawSVGPlugin
  • TweenMax
  • jquery
  • svg
  • js
2016 Loader

Preloader на css, js и svg - 2016 Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie9+.

Использует технологии:

  • transform: translate3d
  • TimelineLite
  • TweenMax
  • jquery
  • svg
  • js

SVG

SVG

Spinning Bubbles

Preloader на svg - Spinning Bubbles

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac).

В IE и Windows phone не работает, потому что они не поддерживают SVG.

Использует технологии:

  • svg
SVG Loading icons

Preloader на svg - SVG Loading icons

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac).

В IE и Windows phone не работает, потому что они не поддерживают SVG.

Использует технологии:

  • svg
Animated SVG Movie Camera Loader

Preloader на svg - Animated SVG Movie Camera Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

В Windows phone не работает, потому что не поддерживает SVG.

Использует технологии:

  • svg
SVG Loader Animation

Preloader на svg - SVG Loader Animation

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac).

В IE и Windows phone не работает, потому что они не поддерживают SVG.

Использует технологии:

  • svg

CSS + SVG

CSS + SVG

Modern Google Loader in Pure CSS

Preloader на css и svg - Modern Google Loader in Pure CSS

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac).

В IE и Windows phone не работает, потому что они не поддерживают SVG.

Использует технологии:

  • keyframes animation
  • stroke
  • svg
Authentic Weather Loader

Preloader на css и svg - Authentic Weather Loader

Не достаточно эффективное решение из-за анимации css-своства height.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: rotateZ
  • nth-child
  • svg
Color Dots Loader

Preloader на css и svg - Color Dots Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera;
  • В ie10+ не все эффекты.
  • ie10+.

В Safari (mac) не работает.

Использует технологии:

  • keyframes animation
  • transform: translateY
  • transform: rotate
  • filter: url
  • nth-child
  • svg
CSS Only SVG Infinity Loader

Preloader на css и svg - CSS Only SVG Infinity Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac).

В IE и Windows phone не работает.

Использует технологии:

  • keyframes animation
  • transform: translateX
  • stroke-dasharray
  • stroke-dashoffset
  • svg
DC SVG Loader v.1

Preloader на css и svg - DC SVG Loader v.1

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac).

В IE и Windows phone не работает.

Использует технологии:

  • keyframes animation
  • font-smoothing: antialiased
  • text-size-adjust: 100%
  • transform: rotateY
  • perspective: 600
  • rgba
  • svg
Flat UI CSS Loaders

Preloader на css и svg - Flat UI CSS Loaders

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • keyframes animation
  • transform: rotateZ
  • box-shadow
  • rgba

SVG + Javascript

SVG + Javascript

SVG Flight Loader

Preloader на svg и js - SVG Flight Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie9+.

Использует технологии:

  • js (TweenMax+ MorphSVGPlugin)
  • svg

Canvas

Canvas

Windows 8 loading

Preloader на canvas - Windows 8 loading

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • requestAnimationFrame
  • canvas
  • js
Constrained filling

Preloader на canvas - Constrained filling

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • requestAnimationFrame
  • canvas
  • js
Canvas Spiral Loader

Preloader на canvas - Canvas Spiral Loader

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+, Windows phone 8+ и iOS 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie10+.

Использует технологии:

  • requestAnimationFrame
  • canvas
  • js
Simple Rotating Spinner

Preloader на canvas - Simple Rotating Spinner

Эффективное решение.
Сайт библиотеки.

Работает в браузерах:

  • Android 3.3+ и Windows phone 8+;
  • Chrome, Firefox, Opera, Safari (mac);
  • ie9+.

В iOS8+ не работает.

Использует технологии:

  • sketch.js
  • canvas
  • js

Автор: Teadon

Источник

* - обязательные к заполнению поля

Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js