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

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

О коде

TERMINAL SPINNER

Совместимые браузеры: Google Chrome, Firefox, Opera, Safari.

TERMINAL SPINNER

О коде

CSS3 ANIMATIONS SPINNERS

Анимация загрузки, созданная на чистом CSS3 без использования JavaScript.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: Google Fonts, Reset.css, Autoprefixer.js

CSS3 ANIMATIONS SPINNERS

О коде

SUGARCUBE SPINNER

Красивая HTML и CSS анимация кубика сахара.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: Autoprefixer.js.

SUGARCUBE SPINNER
  • Автор: Юлиан Савин, 27 апреля 2016 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML (Pug) / CSS.

О коде

CSS SPINNERS

Простой CSS индикатор загрузки. Он создан с помощью CSS и минимального количества HTML-разметки.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

CSS SPINNERS
  • Автор: Адитая Брандари, 4 марта 2016 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML / CSS (SCSS).

О коде

SPINNER

Анимация загрузки, созданная на чистом CSS.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

SPINNER
  • Автор: Фабио Оттавиани, 22 января 2016 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML / CSS (SCSS).

О коде

CSS AND SVG SPINNER

Современный SVG спиннер, созданный на основе CSS.

Совместимые браузеры: Google Chrome, Edge, Firefox, Opera, Safari.

Зависимости: Reset.css, Autoprefixer.js

CSS AND SVG SPINNER

О коде

POLYGON SPINNER

Анимация загрузки, которая выводит SVG-треугольник, а затем преобразует его в многоугольник и обратно.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: TweenMax.js, Underscore.js.

POLYGON SPINNER
  • Автор: Фабрицио Бьянки, 23 марта 2015 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML (Haml) / CSS.

О коде

8 BIT SPINNER

Пиксельная круговая анимация загрузки с использованием свойства box-shadow.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: Reset.css, Prefixfree.js.

8 BIT SPINNER
  • Автор: Мартин ван Дрил, 17 марта 2015 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML / CSS.

О коде

CSS LOADING ANIMATION

Красивый эффект CSS спиннера анимации загрузки.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

CSS LOADING ANIMATION
  • Автор: Хьюго Виледаль, 21 октября 2014 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML / CSS (SCSS).

О коде

SIMPLE REPEATING SPINNER

Простой повторяющийся спиннер с красивой анимацией.

Совместимые браузеры: Google Chrome, IE, Firefox, Opera, Safari.

SIMPLE REPEATING SPINNER
  • Автор: Меттью Роэль, 19 сентября 2014 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML (Haml) / CSS (Sass).

О коде

CSS3 LOADING SPINNER

Крутая CSS3 анимация загрузки.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: Google Fonts, Autoprefixer.js.

CSS3 LOADING SPINNER
  • Автор: Омер Фатих, 22 августа 2014 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML / CSS (Less).

О коде

PURE CSS SPINNER

Точечный сппиннер, созданный на чистом CSS.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari/

PURE CSS SPINNER
  • Автор: Макс Руйгеваард, 21 августа 2014 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML / CSS.

О коде

SPINNER

Простой спиннер, созданный с помощью HTML и CSS-анимации.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: Autoprefixer.js.

SPINNER
  • Автор: Кети ДеКора, 28 мая 2014 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML (Haml) / CSS (SCSS).

О коде

LOADING SPINNER

Анимация загрузки на основе CSS 3.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: Reset.css, Autoprefixer.js, Modernizr.js.

LOADING SPINNER
  • Автор: Игор Амадо, 23 февраля 2014 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML (Haml) / CSS (SCSS).

О коде

RAINBOW SPINNER

HTML и CSS спиннер.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: Reset.css, Prefixfree.js.

RAINBOW SPINNER
  • Автор: Мэтт Систо, 3 декабря 2013 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML / CSS (SCSS).

О коде

SIMPLE CSS-ONLY LOADING SPINNER

Простой CSS-спиннер анимации загрузки, созданный с помощью SASS.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: Normalize.css

SIMPLE CSS-ONLY LOADING SPINNER
  • Автор: Кристиан Денни Сторгард, 4 июля 2013 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML / CSS.

О коде

DIGITAL SPINNER

CSS3-спинннер с дисками, вращающимися с разной скоростью.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

DIGITAL SPINNER
  • Автор: Хаким Эль Хатта, 7 июля 2013 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML (Haml) / CSS (SCSS).

О коде

CSS SPINNER ANIMATION

Еще один CSS-спиннер анимации загрузки. Непрактичный, так как в нем используется много элементов DOM.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

CSS SPINNER ANIMATION
  • Автор: Ноэль Дельгадо, 3 апреля 2013 г.
  • Ссылки: демо-версия и код.
  • Создано с помощью: HTML (Haml) / CSS (SCSS).

О коде

SPINNER

Стрелки часов созданы с помощью псевдоэлементов :before и :after. Анимация применяется к псевдоэлементам.

Совместимые браузеры: Google Chrome, IE, Edge, Firefox, Opera, Safari.

Зависимости: Normalize.css, Autoprefixer.js.

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