Анимация загрузки круг css

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.

• Автор: Юлиан Савин, 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.

• Автор: Кети ДеКора, 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

Совместимые браузеры : 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.

• Автор: Кристиан Денни Сторгард, 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.

Источник

Анимация загрузки круг css

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

Вдобавок к текстовым урокам по каскадным таблицам стилей, в данном разделе также представлены полезные уроки CSS для начинающих. Все материалы изложены в максимально простой и понятной форме, поэтому даже абсолютный новичок сможет быстро освоить все премудрости создания красивого оформления сайтов.

• 

Забавные эффекты для букв

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Источник

Индикатор загрузки на чистом CSS

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Если у вас есть сайт, вам пригодится индикатор загрузки, чтобы пользователи, нажав на кнопку или ссылку, видели, что что-то происходит.

Этот компонент можно использовать во многих местах. При этом желательно, чтобы он был как можно проще.

В этой статье мы рассмотрим создание индикаторов загрузки двух типов. В обоих случаях мы будем использовать всего один html-элемент и несколько строк CSS-кода. Стоит отметить, что наши индикаторы будут настраиваемыми: вы запросто сможете создать множество их вариаций на основе одного и того же кода.

Как создать спиннер

В CodePen вы видите демо того, что мы создадим:

Здесь у нас четыре разных индикатора на основе одного кода. Благодаря изменению всего нескольких переменных мы можем генерировать новый индикатор, не прикасаясь к CSS-коду.

Переменные у нас следующие:

• —b задает толщину черточек
• —n — число черточек
• —g определяет промежутки между черточками. Поскольку у нас круговой элемент, это значение задается как угол.
• —c определяет цвет.

Вот эти переменные на картинке — для лучшего понимания:

Приступаем к CSS-коду. Для иллюстрации пошагового создания индикатора загрузки используем другую фигуру:

Тут пока ничего сложного. Обратите внимание на использование aspect-ratio . Это позволит менять всего одно значение при изменении размера индикатора.

Затем мы добавляем заливку с коническим градиентом от прозрачного до заданного цвета (переменная —c ):

На этом этапе мы вводим свойство mask , чтобы спрятать некоторые части круга (повторяющимся образом). Тут будут применяться переменные —n и —g .

Если вы присмотритесь к нашей фигуре, вы заметите следующий шаблон:

видимая часть невидимая часть видимая часть невидимая часть и т. д.

Чтобы достичь такого эффекта, мы используем repeating-conic-gradient(#000 0 X, #0000 0 Y) .

От 0 до X у нас непрозрачный цвет (видимая часть), а от X до Y — прозрачный (невидимая часть).

• Нам нужен промежуток, равный g , между видимыми частями, так что формула для видимых частей X и Y будет X = Y — g .
• Нам нужно n видимых частей, так что формула Y должна быть Y = 360deg/n . 360deg — это полный круг (360 градусов), который мы просто делим на n .

На данный момент у нас следующий код:

Следующий шаг самый заковыристый. Нам нужно применить еще одну маску, чтобы создать как бы отверстие в круге и таким образом получить итоговую форму.

Для этого мы используем radial-gradient() (что логично) с нашей переменной b :

radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0)

Это полный круг, из которого мы вычитаем толщину линии, равную b .

Добавляем это к предыдущей маске:

Теперь у нас два масочных слоя, но результат не такой, как нам хотелось. Мы получили круг:

Выглядит странно, но на самом деле такой вид совершенно закономерен. «Финальная» видимая часть — не что иное, как сумма всех видимых частей каждого масочного слоя. Это поведение можно изменить при помощи mask-composite . Об этом свойстве стоит написать отдельную статью, так что здесь я просто приведу значение.

В нашем случае нам нужно значение intersect (и destination-out для того же свойства с префиксом). Код становится таким:

С этой фигурой покончено! Только вот индикатор пока без анимации, а должно быть бесконечное вращение.

Обращаю ваше внимание, что для создания иллюзии неподвижных черточек с движущимися цветами я использовал анимацию steps .

Вот иллюстрация, чтобы вы могли понять разницу:

Первый вариант индикатора сделан при помощи линейной анимации (linear). При этом бесконечно вращается сама фигура (это не то, чего бы нам хотелось).

Во втором варианте анимация прерывистая (как нам и нужно).

Вот полный код, включая анимацию:

Вы заметите, что тут кое-что отличается от моих объяснений:

• Я добавил padding: 1px и установил content-box в background
• Здесь есть +/1deg между цветами repeating-conic-gradient()
• Также здесь несколько процентов разницы между цветами внутри radial-gradient()

Это небольшие правки для исправления визуальных помех. Градиенты известны тем, что порой производят «странные» результаты. Во избежание этого приходится подгонять некоторые значения вручную.

Как создать индикатор прогресса загрузки

Как и с первым индикатором, давайте начнем с обзора:

У нас здесь та же конфигурация, что в предыдущем индикаторе. CSS-переменные для управления лоадером:

• —n определяет число черточек/полосок
• —s определяет ширину каждой полоски
• —g задает пробел между полосками

Мы видим, что ширина всего элемента зависит от трех переменных. Наш CSS-код будет следующим:

Для создания промежутков со всех сторон мы используем padding . Наша ширина будет равна числу полосок, умноженному на ширину полосок, плюс промежутки. Один промежуток мы удаляем, потому что при N полосок у нас N-1 промежутков между ними.

Для создания полосок мы используем следующий градиент:

repeating-linear-gradient(90deg, currentColor 0 var(--s), #0000 0 calc(var(--s) + var(--g)) )

Здесь от 0 до s — заданный цвет, а от s до s + g — прозрачный цвет (промежуток).

currentColor , который я использую, это значение свойства color . Обратите внимание, что я не определял никакой цвет внутри border , так что здесь тоже будет использоваться значение color .

Благодаря использованию content-box градиент не закроет зону padding .

Затем я определяю размер как 100% 100% и позицию left.

В этом индикаторе мы будем анимировать background-size от 0% 100% до 100% 100% , т. е. ширину нашего градиента от 0% до 100%.

Как и в предыдущем случае, мы применим steps() , чтобы получить не плавную, а прерывистую анимацию.

Чтобы добиться такого эффекта, как на второй картинке, добавим следующий код:

Присмотревшись к нашей гифке, вы заметите, что анимация неполная. Мы пропускаем одну полоску в конце, хотя используем N . Это не баг, именно так и работает steps() .

Чтобы это исправить, нужно добавить дополнительный шаг. Мы увеличим background-size нашего градиента, чтобы там было N+1 полосок, и используем steps(N+1) .

В итоге наш код будет выглядеть так:

Обратите внимание, что ширина градиента равна N+1 , умноженному на ширину одной полоски, плюс промежутки (вместо 100%).

Источник