Индикатор загрузки для сайта

Урок посвящён созданию оригинального индикатора загрузки для сайта с использованием простых css-фигур и анимации, базирующейся на трансформации элементов. Такой индикатор можно использовать для свадебного сайта, сайта ресторана или винного магазина.

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

See the Pen wineshop loader by Elena Nazarova (@nazarelen) on CodePen.

wineshop

Рис. 1. Разметка индикатора загрузки для сайта

Разметка HTML

Стили CSS
Для сглаживания неровности краёв при движении добавим элементам тень такого же цвета, что и сами элементы. Напиток внутри бокала сделан в виде круга с градиентом, одна половина прозрачная, другая — цветная. Ножку и подставку бокала сместим на 1px, чтобы при движении не образовывался промежуток между элементами.

  • Создание Сайтов

    Что-то не понял, куда это применять.

    • На некоторых сайтах делают такую страницу-заглушку, которая будет видна до тех пор, пока страница сайта полностью не загрузится.

      • Создание Сайтов

        А как реализуется такая страница.

        • С помощью скрипта. Не такой пример конечно, попроще — https://github.com/Gaya/queryloader2, демо — https://gaya.github.io/scripts/queryLoader2/

          • Создание Сайтов

            Честно говоря, меня лично раздражает такая загрузка сайта. Я обычно закрываю сайт и ухожу. Ждать неведомого чего … раздражительно.

          • Можно также использовать для предзагрузки слайдера, не обязательно для всей страницы.