19 CSS спиннеров анимации загрузки

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

• Автор: Зено Роча, 5 июля 2017 года.
• Ссылки: демо-версия и код.
• Создано с помощью: HTML / CSS.

О коде

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.

Вадим Дворниковавтор-переводчик статьи «19 CSS Spinners»