Страница 1 из 11
Форум сайта ZorNet.Ru » Все для вебмастера » Начинающий Вебмастер » Простая анимация круговорота CSS
Простая анимация круговорота CSS
Kosten
Дата: Понедельник, 27.11.2017, 16:50 | Сообщение 1
Администраторы
Сообщений:15987
Награды: 51


Если вы используете стили или Wordpress, вы наверняка видели этот эффект spinner при выполнении различных действий в пределах области администрирования. Мне это очень понравилось, и именно по этой причине сделана данная версия SCSS.

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

Разметка здесь представляет собой один divэлемент, но я уверен, вы тоже ненавидите это выражение. Кроме того, внутренняя цель резервного текста предназначена для чтения с экрана.



HTML

Код
<div class="spinner">Loading...</div>


CSS

На моделирование, возможно, самой сложной составляющей было вычисление transform-originзначений для внутреннего вращающегося круга, чтобы результат был просто идеальным. И для этого мне пришлось моделировать два концентрических круга, чтобы установить путь (орбита) на внутренний круг, который будет вращаться. Должен признаться, я потерпел неудачу в первый раз, но, в конце концов, все прошло хорошо.



Легкий подход здесь состоял бы в том, чтобы повернуть всю обертку, как только был бы расположен внутренний круг. Но такое решение, как этот, не позволило бы добавлять элементы CSS3, такие как тени или градиенты на .spinner контейнере.

Демонстрация
Прикрепления: 0464282.png(14Kb)
Страна: (RU)
Olchikn1
Дата: Вторник, 28.11.2017, 10:24 | Сообщение 2
Пользователи
Сообщений:4
Награды: 0


А через JS не проще сделать?

Hello
Страна: (RU)
Kosten
Дата: Вторник, 28.11.2017, 18:14 | Сообщение 3
Администраторы
Сообщений:15987
Награды: 51


Olchikn1, можно вообще поставить на GIF формат.
Страна: (RU)
Форум сайта ZorNet.Ru » Все для вебмастера » Начинающий Вебмастер » Простая анимация круговорота CSS
Страница 1 из 11
Поиск: