19 CSS спиннеров анимации загрузки
Подборка бесплатных HTML и CSS спиннеров анимации загрузки.

- Автор: Зено Роча, 5 июля 2017 года.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML / CSS.
О коде
- TERMINAL SPINNER
- CSS3 ANIMATIONS SPINNERS
- SUGARCUBE SPINNER
- CSS SPINNERS
- SPINNER
- CSS AND SVG SPINNER
- POLYGON SPINNER
- 8 BIT SPINNER
- CSS LOADING ANIMATION
- SIMPLE REPEATING SPINNER
- CSS3 LOADING SPINNER
- PURE CSS SPINNER
- SPINNER
- LOADING SPINNER
- RAINBOW SPINNER
- SIMPLE CSS-ONLY LOADING SPINNER
- DIGITAL SPINNER
- CSS SPINNER ANIMATION
- SPINNER
TERMINAL SPINNER
Совместимые браузеры: Google Chrome, Firefox, Opera, Safari.

- Автор: fox_hover, 14 марта 2017 года.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML / CSS (SCSS).
О коде
CSS3 ANIMATIONS SPINNERS
Анимация загрузки, созданная на чистом CSS3 без использования JavaScript.
Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.
Зависимости: Google Fonts, Reset.css, Autoprefixer.js

- Автор: Milk Studio, 2 июня 2016 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML / CSS (SCSS).
О коде
SUGARCUBE SPINNER
Красивая HTML и CSS анимация кубика сахара.
Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.
Зависимости: Autoprefixer.js.

- Автор: Юлиан Савин, 27 апреля 2016 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML (Pug) / CSS.
О коде
CSS SPINNERS
Простой CSS индикатор загрузки. Он создан с помощью CSS и минимального количества HTML-разметки.
Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

- Автор: Адитая Брандари, 4 марта 2016 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML / CSS (SCSS).
О коде
SPINNER
Анимация загрузки, созданная на чистом CSS.
Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

- Автор: Фабио Оттавиани, 22 января 2016 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML / CSS (SCSS).
О коде
CSS AND SVG SPINNER
Современный SVG спиннер, созданный на основе CSS.
Совместимые браузеры: Google Chrome, Edge, Firefox, Opera, Safari.
Зависимости: Reset.css, Autoprefixer.js

- Автор: neil tron 18 июня, 2015 года.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML / CSS / JavaScript.
О коде
POLYGON SPINNER
Анимация загрузки, которая выводит SVG-треугольник, а затем преобразует его в многоугольник и обратно.
Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.
Зависимости: TweenMax.js, Underscore.js.

- Автор: Фабрицио Бьянки, 23 марта 2015 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML (Haml) / CSS.
О коде
8 BIT SPINNER
Пиксельная круговая анимация загрузки с использованием свойства box-shadow.
Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.
Зависимости: Reset.css, Prefixfree.js.

- Автор: Мартин ван Дрил, 17 марта 2015 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML / CSS.
О коде
CSS LOADING ANIMATION
Красивый эффект CSS спиннера анимации загрузки.
Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

- Автор: Хьюго Виледаль, 21 октября 2014 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML / CSS (SCSS).
О коде
SIMPLE REPEATING SPINNER
Простой повторяющийся спиннер с красивой анимацией.
Совместимые браузеры: Google Chrome, IE, Firefox, Opera, Safari.

- Автор: Меттью Роэль, 19 сентября 2014 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML (Haml) / CSS (Sass).
О коде
CSS3 LOADING SPINNER
Крутая CSS3 анимация загрузки.
Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.
Зависимости: Google Fonts, Autoprefixer.js.

- Автор: Омер Фатих, 22 августа 2014 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML / CSS (Less).
О коде
PURE CSS SPINNER
Точечный сппиннер, созданный на чистом CSS.
Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari/

- Автор: Макс Руйгеваард, 21 августа 2014 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML / CSS.
О коде
SPINNER
Простой спиннер, созданный с помощью HTML и CSS-анимации.
Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.
Зависимости: Autoprefixer.js.

- Автор: Кети ДеКора, 28 мая 2014 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML (Haml) / CSS (SCSS).
О коде
LOADING SPINNER
Анимация загрузки на основе CSS 3.
Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.
Зависимости: Reset.css, Autoprefixer.js, Modernizr.js.

- Автор: Игор Амадо, 23 февраля 2014 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML (Haml) / CSS (SCSS).
О коде
RAINBOW SPINNER
HTML и CSS спиннер.
Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.
Зависимости: Reset.css, Prefixfree.js.

- Автор: Мэтт Систо, 3 декабря 2013 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML / CSS (SCSS).
О коде
SIMPLE CSS-ONLY LOADING SPINNER
Простой CSS-спиннер анимации загрузки, созданный с помощью SASS.
Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.
Зависимости: Normalize.css

- Автор: Кристиан Денни Сторгард, 4 июля 2013 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML / CSS.
О коде
DIGITAL SPINNER
CSS3-спинннер с дисками, вращающимися с разной скоростью.
Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

- Автор: Хаким Эль Хатта, 7 июля 2013 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML (Haml) / CSS (SCSS).
О коде
CSS SPINNER ANIMATION
Еще один CSS-спиннер анимации загрузки. Непрактичный, так как в нем используется много элементов DOM.
Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

- Автор: Ноэль Дельгадо, 3 апреля 2013 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML (Haml) / CSS (SCSS).
О коде
SPINNER
Стрелки часов созданы с помощью псевдоэлементов :before и :after. Анимация применяется к псевдоэлементам.
Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.
Зависимости: Normalize.css, Autoprefixer.js.