Если вы используете стили или Wordpress, вы наверняка видели этот эффект spinner при выполнении различных действий в пределах области администрирования. Мне это очень понравилось, и именно по этой причине сделана данная версия SCSS.
Люди, похоже, любят создавать индикаторы загрузки и подобные вещи, что тоже делал это раньше, но в последнее время я видел тонны и тонны прохладных, надеюсь это просто еще один, который вы пометите.
Разметка здесь представляет собой один divэлемент, но я уверен, вы тоже ненавидите это выражение. Кроме того, внутренняя цель резервного текста предназначена для чтения с экрана.
HTML
Код
<div class="spinner">Loading...</div>
CSS
На моделирование, возможно, самой сложной составляющей было вычисление transform-originзначений для внутреннего вращающегося круга, чтобы результат был просто идеальным. И для этого мне пришлось моделировать два концентрических круга, чтобы установить путь (орбита) на внутренний круг, который будет вращаться. Должен признаться, я потерпел неудачу в первый раз, но, в конце концов, все прошло хорошо.
Легкий подход здесь состоял бы в том, чтобы повернуть всю обертку, как только был бы расположен внутренний круг. Но такое решение, как этот, не позволило бы добавлять элементы CSS3, такие как тени или градиенты на .spinner контейнере.
