Сегодня мы хотели бы показать вам некоторые идеи для создания креативных загрузок. В наши дни на сайтах используется множество различных эффектов и анимаций. Достаточно взять в пример красную строку загрузки в Youtube. Когда на странице идет загрузка контента – будь то изображения или дополнительное содержимое, — было бы неплохо оповестить посетителей об этом при помощи небольшого индикатора загрузки.Суть заключается в том, чтобы предупредить посетителей о происходящей загрузке в привлекательной манере. Конечно же, бывают случаи, когда дизайнеры перебарщивают с анимациями, но зачастую они помогают довольно грамотно подчеркнуть весь дизайн.
Пожалуйста учтите, что примеры представлены лишь для вдохновения, — это простые болванки, не подготовленные к использованию в проектах. Вам нужно будет использовать эти переходы и анимацию вместе с собственным javascript-решением.
В качестве примера мы хотим показать, как сделали один из эффектов: раскрытие загрузки из центра страницы::
.la-anim-7 {
position: fixed;
top: 50%;
bottom: 0;
left: 50%;
z-index: -1;
width: 0;
height: 100%;
background: rgba(0,0,0,0.1);
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
}
.la-anim-7.la-animate {
z-index: 100;
width: 100%;
opacity: 0;
transition: width 5s ease-in, opacity 1s 5s;
}Некоторые браузеры не поддерживают переходы и анимации, примененные к псевдо-элементам, поэтому некоторые эффекты в демо не будут работать. Представленные примеры не будут работать в браузерах, которые не поддерживают 3D-трансформации на CSS (то есть, IE9 и ниже).
Круглый таймер на SVG был разработан Anders Grimsrud, а круг загрузки в примере с угловым индикатором – дизайнером по имени Metty.
Давайте взглянем на скриншоты некоторых эффектов: 
Надеемся, что данные примеры вдохновят вас на собственные эффекты!
Исходник в архиве.