![Обзор анимации с codepen для страниц загрузки сайта Обзор анимации с codepen для страниц загрузки сайта](https://habrastorage.org/web/756/f36/686/756f366869cf4639861bfa09ef3e8863.jpg)
Программисты проверяют идеи для сайтов на площадках: 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
Круглые
Circle Loader
![Круглый preloader на css - Circle Loader Круглый preloader на css - Circle Loader](https://habrastorage.org/web/fac/b3f/355/facb3f3556944193b01a3aa85658f6e6.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - Single Element Spinner](https://habrastorage.org/web/a45/308/6d8/a453086d83a249ba893032b5df349349.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- Android 3.3+, Windows phone 8+ и iOS 8+;
- Chrome, Firefox, Opera, Safari (mac);
- ie10+.
Использует технологии:
- keyframes animation
- transform rotate
Loading animation
![Круглый preloader на css - Loading animation Круглый preloader на css - Loading animation](https://habrastorage.org/web/644/69b/f2a/64469bf2a31642aa81b794ad72a3fd40.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - Loading dots](https://habrastorage.org/web/a59/d08/8b1/a59d088b16a84a5ebccb216081aa6274.jpg)
Не достаточно эффективное решение из-за "> 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 Круглый preloader на css - Simple CSS3 Animation Example](https://habrastorage.org/web/76b/d23/a43/76bd23a43ea8498e9638df0f6f3ad8c6.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - Single Element Spinners](https://habrastorage.org/web/089/259/669/08925966966146d6849cba63f7395a2b.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - XBox SmartGlass Loading Animation in CSS using 1 element](https://habrastorage.org/web/819/b0f/2d1/819b0f2d1ed347bba94135e1c6393350.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - Pushing pixels css loader](https://habrastorage.org/web/4fb/e09/035/4fbe090357a242e8802d58993f56d0b5.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - Pure CSS Loader Ring of Light](https://habrastorage.org/web/d3a/bba/c2e/d3abbac2e0d74746b8bafba9ec7a65b3.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - Loading test](https://habrastorage.org/web/d13/b89/e22/d13b89e2229e46c2bbb61e01c192f744.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - CSS3 Infinite Loader](https://habrastorage.org/web/3d5/c3a/8d5/3d5c3a8d54184598a20f14688ab3960d.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - Rainbow Infinity Loader](https://habrastorage.org/web/59c/d55/6b0/59cd556b07cb43aa9c6f29b4025bc153.jpg)
Интересное решение, но неэффективное — из-за анимации 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 Круглый preloader на css - Loader wave](https://habrastorage.org/web/076/9d3/5f0/0769d35f066a45e488d0d78d8fc682b8.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - Simple Loader](https://habrastorage.org/web/759/136/9f5/7591369f575c43d2b3e70581c1772b4a.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - CSS3 Loading Spinner](https://habrastorage.org/web/d45/47a/f6f/d4547af6f3c3464097914f9c03f16b39.jpg)
Простой код, но не достаточно эффективное решение из-за анимации 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 Круглый preloader на css - CSS circle loaders](https://habrastorage.org/web/ff6/459/741/ff64597416a74531badc2b3fd998d634.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - eGzdI](https://habrastorage.org/web/465/e99/868/465e998685b64cf58bbc39435f56e14c.jpg)
Эффективное решение и простой код.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - Pure CSS loader #2](https://habrastorage.org/web/92a/813/7f3/92a8137f36ad41289aa4dd47c19e0214.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - Simple CSS Loading](https://habrastorage.org/web/f5f/8f3/d47/f5f8f3d47ce74ce0abb29c16372209a0.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - Simple single-element loading animation](https://habrastorage.org/web/174/fba/297/174fba29724f457dac01893e282d21c8.jpg)
Простое и эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- Android 3.3+, Windows phone 8+ и iOS 8+;
- Chrome, Firefox, Opera, Safari (mac);
- edge+.
Использует технологии:
- keyframes animation
- transform: rotate
- rgba
QdJjoa
![Круглый preloader на css - QdJjoa Круглый preloader на css - QdJjoa](https://habrastorage.org/web/4ae/7a1/ad2/4ae7a1ad2cfc4cf3ba8cd08a1ff1aeaf.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - Pure CSS 2D Spinning Loader](https://habrastorage.org/web/029/7a6/820/0297a68205c34a99a22064a125d0cd1d.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- Android 3.3+, Windows phone 8+ и iOS 8+;
- Chrome, Firefox, Opera, Safari (mac);
- ie10+.
Использует технологии:
- keyframes animation
- transform: translateX
- transform: scale
Loader
![Круглый preloader на css - Loader Круглый preloader на css - Loader](https://habrastorage.org/web/14d/788/576/14d788576d5748dea31e9129d0707c32.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - Single-Element Loader Mixins](https://habrastorage.org/web/972/e76/fc0/972e76fc0da04bc5aa61c34a8c247da2.jpg)
Некоторые решения эффективные, а некоторые — нет из-за анимации 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 Круглый preloader на css - Single Element Spinner](https://habrastorage.org/web/caa/cd4/ecb/caacd4ecbde24012b0ed9f3466781879.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - Earthworm loader](https://habrastorage.org/web/e0a/f87/dcd/e0af87dcda9e4c238e3c030f59ed445a.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - Single-div loader](https://habrastorage.org/web/7a4/095/f96/7a4095f9665e42159e707dc2ba251e1e.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Круглый preloader на css - Minimal Throbbers](https://habrastorage.org/web/969/057/b8f/969057b8f9434a62b24ad671c85c8e09.jpg)
Простое и эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- Android 3.3+, Windows phone 8+ и iOS 8+;
- Chrome, Firefox, Opera, Safari (mac);
- ie10+.
Использует технологии:
- keyframes animation
- transform: rotateZ
Smooth Pulse
![Круглый preloader на css - Smooth Pulse Круглый preloader на css - Smooth Pulse](https://habrastorage.org/web/d2b/1a4/20d/d2b1a420dce64d47b8a329ce69b10899.jpg)
Неэффективное из-за 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 Квадратный preloader на css - Rubik loader](https://habrastorage.org/web/4ae/dd4/c63/4aedd4c63c5e440dae9900023966c3ef.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- Android 3.3+, Windows phone 8+ и iOS 8+;
- Chrome, Firefox, Opera, Safari (mac);
- ie7+.
Использует технологии:
- transform: translate
- gif
Loader
![Квадратный preloader на css - Loader Квадратный preloader на css - Loader](https://habrastorage.org/web/fd4/f2a/25f/fd4f2a25ffff45b0b6de3d5b1743a3ff.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Квадратный preloader на css - CSS3 Transform Loader](https://habrastorage.org/web/1f0/de3/556/1f0de35565634b7c8c2788ad5d17f4d9.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Квадратный preloader на css - Line Loader](https://habrastorage.org/web/e67/413/113/e6741311330d4cbb8029bc1942baff2c.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Квадратный preloader на css - CSS3 Loader](https://habrastorage.org/web/340/eb7/e97/340eb7e97bb747dc8013e1ba8a1d4de6.jpg)
Решение красивое, но неэффективное из-за css-свойства height.
Сайт библиотеки.
Работает в браузерах:
- Android 3.3+, Windows phone 8+ и iOS 8+;
- Chrome, Firefox, Opera, Safari (mac);
- ie10+.
Использует технологии:
- nth-child
BoxShuffle
![Квадратный preloader на css - BoxShuffle Квадратный preloader на css - BoxShuffle](https://habrastorage.org/web/898/958/63e/89895863e22a45389617c55366a7965a.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Сборник preloader на css - Spinners using Font Icons](https://habrastorage.org/web/76b/05b/3da/76b05b3dade646799a2652a8dc8ba8de.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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) Сборник preloader на css - Loaders (WIP)](https://habrastorage.org/web/7f4/111/ad5/7f4111ad5d504a8791b286d2d500235f.jpg)
Часть решений эффективны, а часть — нет из-за анимации 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 Сборник preloader на css - CSS Loading Spinners](https://habrastorage.org/web/e95/a3f/e6b/e95a3fe6b65d45e6a888524652c263ec.jpg)
Часть решений эффективны, а часть — нет из-за анимации 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 Сборник preloader на css - Pure CSS Loaders kit](https://habrastorage.org/web/458/20c/b3c/45820cb3c3c04245a0831f3a897ce00f.jpg)
Не которые решения не эффективны из-за анимации 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 Необычный preloader на css - Preloader CSS](https://habrastorage.org/web/f82/aea/2f3/f82aea2f3e624e7fbc5a55d3e21cdc53.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- В 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 Необычный preloader на css - Loading spinner](https://habrastorage.org/web/813/bfb/7d5/813bfb7d58764f6d8b704a4d7344396c.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Необычный preloader на css - Pixeden logo loading](https://habrastorage.org/web/e8e/787/f5c/e8e787f5cabf41168ff68bcad682fb93.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- В 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 Необычный preloader на css - Spinner](https://habrastorage.org/web/f65/947/1be/f659471beda248af982f1ef1879c130c.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Необычный preloader на css - Lightsaber Fight Loader](https://habrastorage.org/web/eb2/71f/365/eb271f365b884c619f69187032fb9822.jpg)
Неэффективное, но интересное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Необычный preloader на css - Code Loader](https://habrastorage.org/web/0d4/dce/ef8/0d4dceef87ec4963867c1192332b43a7.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Необычный preloader на css - CSS Stroke Loader Animation](https://habrastorage.org/web/999/555/2c3/9995552c37e34ae08c632980752dd917.jpg)
Чистый код, но неэффективное решение из-за анимации 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 Необычный preloader на css - #Codevember - Day 6 - Bookshelf loader](https://habrastorage.org/web/e22/3bc/f82/e223bcf82fdb4b7e896950f9ac845b82.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Необычный preloader на css - Helix Loader](https://habrastorage.org/web/9b7/72e/98c/9b772e98cfd74d7e88271321e77ab77f.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Необычный preloader на css - Daily UI #010: CSS 3 Loading](https://habrastorage.org/web/9ee/bb3/543/9eebb3543a62427789b9445c30be5222.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Необычный preloader на css - One element four color loader](https://habrastorage.org/web/fe1/f07/a52/fe1f07a52e1242c7a0eeba73e7a4a001.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- Android 3.3+, Windows phone 8+ и iOS 8+;
- Chrome, Firefox, Opera, Safari (mac);
- ie10+.
Использует технологии:
- keyframes animation
- transform: translate
Helix Loader
![Необычный preloader на css - Helix Loader Необычный preloader на css - Helix Loader](https://habrastorage.org/web/efe/967/eeb/efe967eeb8274cfb9ff395b614625c7f.jpg)
Не достаточно эффективное решение из-за анимации 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 Необычный preloader на css - Loading Idea](https://habrastorage.org/web/c53/a06/690/c53a06690b5842fb999b6449767a9811.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Необычный preloader на css - Loader css3](https://habrastorage.org/web/11d/6a9/2a2/11d6a92a268d4d3fa686424f4880aaf9.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Необычный preloader на css - Daily UI #20 | CSS loader](https://habrastorage.org/web/d52/677/68d/d5267768d5124941b10b1b4505292461.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Необычный preloader на css - DNA Loader](https://habrastorage.org/web/1a6/f06/fe4/1a6f06fe48c9455ea77f4e2aa98baefc.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Необычный preloader на css - Wave Loader](https://habrastorage.org/web/3de/667/bd7/3de667bd7a1447b9acfffec8679979c1.jpg)
Интересное решение, но неэффективное из-за анимации css-свойств: border-radius, left и top.
Сайт библиотеки.
Работает в браузерах:
- Windows phone 8+ и iOS 8+;
- Chrome, Firefox, Opera, Safari (mac);
- ie10+.
В Android 3.3+ не работает.
Использует технологии:
- keyframes animation
CSS + Javascript
Duwal
![Preloader на css и js - Duwal Preloader на css и js - Duwal](https://habrastorage.org/web/236/c50/564/236c50564b714024ae11035bc1810fe0.jpg)
Решение эффективное. 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 Preloader на css и js - Google Loading thingy](https://habrastorage.org/web/02a/bf1/e10/02abf1e10f084ca2bdf15f2707843924.jpg)
Не достаточно эффективное решение из-за анимации 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 Preloader на css и js - Crosshair loader](https://habrastorage.org/web/bf6/37b/c0f/bf637bc0ff274eaa9f7c2e78146b5835.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Preloader на css и js - Space Junk preloader](https://habrastorage.org/web/c98/877/b2d/c98877b2d8f54463867f8fc983115dfd.jpg)
Эффективное решение, но требует подключать тяжелый скрипт 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 Preloader на css и js - Page Transition with Loader](https://habrastorage.org/web/fe6/d16/3bb/fe6d163bb8d3488f9b0af58bb52447f4.jpg)
Эффективное решение, но требует подключать тяжелые скрипты: 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
SVG Loaders
![Preloader на css, js и svg - SVG Loaders Preloader на css, js и svg - SVG Loaders](https://habrastorage.org/web/191/768/92d/19176892d397421a8800c8c8e954e189.jpg)
Эффективное решение. При помощи 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 Preloader на css, js и svg - House Loader](https://habrastorage.org/web/dd8/c41/961/dd8c419612844547b350db6ecba39f9e.jpg)
Эффективное решение. При помощи 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 Preloader на css, js и svg - Prism Loading Screen](https://habrastorage.org/web/900/91d/8a7/90091d8a7b5d43258c58ba59b6793ba0.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Preloader на css, js и svg - Bubble Loader](https://habrastorage.org/web/d8a/a6b/8dc/d8aa6b8dc474465aa35bdaf79a58c353.jpg)
Решение не достаточно эффективное. Начальный перебор элементов 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 Preloader на css, js и svg - SVG Car Drift Loader](https://habrastorage.org/web/8d4/33f/370/8d433f370f2742be9a10d135ac0b7a4b.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Preloader на css, js и svg - Filler Loader](https://habrastorage.org/web/cac/72e/49a/cac72e49a1374509b5e3d4ef3ff1f276.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Preloader на css, js и svg - 2016 Loader](https://habrastorage.org/web/02a/fdf/8b7/02afdf8b77a146d08cc7db9bee6e3145.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- Android 3.3+, Windows phone 8+ и iOS 8+;
- Chrome, Firefox, Opera, Safari (mac);
- ie9+.
Использует технологии:
- transform: translate3d
- TimelineLite
- TweenMax
- jquery
- svg
- js
SVG
Spinning Bubbles
![Preloader на svg - Spinning Bubbles Preloader на svg - Spinning Bubbles](https://habrastorage.org/web/899/097/6cc/8990976cc5e9407c8533ebefef309172.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- Android 3.3+ и iOS 8+;
- Chrome, Firefox, Opera, Safari (mac).
В IE и Windows phone не работает, потому что они не поддерживают SVG.
Использует технологии:
- svg
SVG Loading icons
![Preloader на svg - SVG Loading icons Preloader на svg - SVG Loading icons](https://habrastorage.org/web/6a3/2e3/4b4/6a32e34b46514629813380b1887e36de.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Preloader на svg - Animated SVG Movie Camera Loader](https://habrastorage.org/web/485/f5c/05a/485f5c05a58041dfa6ef48348b899e5d.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- Android 3.3+ и iOS 8+;
- Chrome, Firefox, Opera, Safari (mac);
- ie10+.
В Windows phone не работает, потому что не поддерживает SVG.
Использует технологии:
- svg
SVG Loader Animation
![Preloader на svg - SVG Loader Animation Preloader на svg - SVG Loader Animation](https://habrastorage.org/web/d46/f12/a89/d46f12a893cb4901a17e959fefba9945.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- Android 3.3+ и iOS 8+;
- Chrome, Firefox, Opera, Safari (mac).
В IE и Windows phone не работает, потому что они не поддерживают SVG.
Использует технологии:
- svg
CSS + SVG
Modern Google Loader in Pure CSS
![Preloader на css и svg - Modern Google Loader in Pure CSS Preloader на css и svg - Modern Google Loader in Pure CSS](https://habrastorage.org/web/922/7b7/15e/9227b715eed94e38bb9e7cdc282f3207.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Preloader на css и svg - Authentic Weather Loader](https://habrastorage.org/web/fb9/ac7/d97/fb9ac7d9722e4bde8a932fffe17fa3af.jpg)
Не достаточно эффективное решение из-за анимации 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 Preloader на css и svg - Color Dots Loader](https://habrastorage.org/web/dc8/3fa/025/dc83fa025e2043a7b2bd0e52aced0a9a.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Preloader на css и svg - CSS Only SVG Infinity Loader](https://habrastorage.org/web/4e2/c41/d3b/4e2c41d3b6cf460e80b1ab5a937fac4a.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Preloader на css и svg - DC SVG Loader v.1](https://habrastorage.org/web/792/bea/810/792bea81066a4001b8747879f6b255ae.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Preloader на css и svg - Flat UI CSS Loaders](https://habrastorage.org/web/d30/999/c76/d30999c760b44d6c9d241553f65928a1.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- Android 3.3+, Windows phone 8+ и iOS 8+;
- Chrome, Firefox, Opera, Safari (mac);
- ie10+.
Использует технологии:
- keyframes animation
- transform: rotateZ
- box-shadow
- rgba
SVG + Javascript
SVG Flight Loader
![Preloader на svg и js - SVG Flight Loader Preloader на svg и js - SVG Flight Loader](https://habrastorage.org/web/ab4/96e/929/ab496e9296b64cd1b248c5dc34918e0b.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- Android 3.3+, Windows phone 8+ и iOS 8+;
- Chrome, Firefox, Opera, Safari (mac);
- ie9+.
Использует технологии:
- js (TweenMax+ MorphSVGPlugin)
- svg
Canvas
Windows 8 loading
![Preloader на canvas - Windows 8 loading Preloader на canvas - Windows 8 loading](https://habrastorage.org/web/e10/906/11c/e1090611cf064abeacac22f514897dce.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- Android 3.3+, Windows phone 8+ и iOS 8+;
- Chrome, Firefox, Opera, Safari (mac);
- ie10+.
Использует технологии:
- requestAnimationFrame
- canvas
- js
Constrained filling
![Preloader на canvas - Constrained filling Preloader на canvas - Constrained filling](https://habrastorage.org/web/2f6/12b/0d6/2f612b0d67cd48159c19b78d9366f902.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Preloader на canvas - Canvas Spiral Loader](https://habrastorage.org/web/489/2d9/49f/4892d949fcb348b2bba989af0513aa9a.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- 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 Preloader на canvas - Simple Rotating Spinner](https://habrastorage.org/web/ce9/b7d/02f/ce9b7d02f67d4d7cb904905c880859dc.jpg)
Эффективное решение.
Сайт библиотеки.
Работает в браузерах:
- Android 3.3+ и Windows phone 8+;
- Chrome, Firefox, Opera, Safari (mac);
- ie9+.
В iOS8+ не работает.
Использует технологии:
- sketch.js
- canvas
- js
Комментарии (13)
sfi0zy
22.06.2017 09:45Тоже делал различные крутилки. Использовал CSS + SVG фильтры, так что в IE все печально, но может кому-то будет интересно.
СпойлерЛипкая крутилка (ссылка)
Три точки с хвостиками (ссылка). Демка немного разваливается в firefox из-за того, что codepen почему-то перестал преобразовывать css-переменные.
Жидкая крутилка (ссылка)
xtala
22.06.2017 12:54Выглядит прикольно. А IE давно пора придать анафеме, 2017 год на дворе как никак.
Grinzzly
23.06.2017 12:56Спасибо большое, очень хорошая обзорная статья, в результате чего теперь под рукой есть ссылка на хорошую подборку, а не часами codepen с лопатой покорять.
xtala
Статья, хорошая, годная. Таких статей надо больше. Это ящик с инструментами. В последнее время у хипстеров появилась мода разводить в статьях кисель на седьмой воде и пережевывать бесцветные сопли. Эта статья не такая. Спасибо.
Teadon
Спасибо. Рад, что понравилось.