Индикатор загрузки данных или, как его еще часто называют, прогресс-бар – это один из важнейших элементов веб-дизайна. Наличие на сайте прогресс-бара может быть очень полезным, особенно, когда какой-либо процесс, например скачивание файла, происходит медленно. Для прогресс-бара очень важно, чтобы он был не только информативным, но еще и красивым. Этому элементу требуется очень качественная отрисовка – прогресс-бар должен быть оригинальным и эффектным. Если пользователю, зашедшему на сайт, приходится ждать, то нужно сделать так, чтобы его ожидание было не скучным. Если индикатор загрузки сделан на высоком уровне и наглядно отражает состояние прогресса выполнения задачи, то у пользователя останется положительное впечатление о сайте, а это именно то, что нужно, особенно если скрипты работают достаточно медленно. FreelanceToday представляет вашему вниманию 10 бесплатных макетов прогресс-баров с необычным дизайном.
Все макеты представляют собой многослойные PSD-файлы, так что их можно редактировать, изменяя внешний вид прогресс-бара таким образом, чтобы он соответствовал основному дизайну сайта.
Круглый прогресс-бар с полосой загрузки, изменяющей цвет в зависимости от хода выполнения задачи. Очень интересное решение – пользователь может «залипнуть», глядя, как полоса постепенно меняет свой цвет.
Даже простенькую горизонтальную полосу загрузки можно сделать очень привлекательной, добавив эффект свечения.
Очень интересный подход к дизайну прогресс-бара. Здесь мы видим не одну, а сразу четыре полосы загрузки. Посетителю сайта однозначно будет не скучно наблюдать за процессом загрузки.
Горизонтальный прогресс-бар с переключателем. Во время загрузки или скачивания файлов пользователь видит, сколько осталось времени до окончания процесса и может убедиться, что он работает с тем файлом, который ему нужен – информация представлена в верхней части полосы загрузки.
Очень простой прогресс-бар от дизайнера Айзека Санчеса. При наведении на полосу прокрутки, по-видимому, должна появляться подсказка с цифрами в процентах.
Прогресс-бар для мобильных приложений с темным пользовательским интерфейсом. Полоса загрузки меняет свой оттенок на более светлый в процессе выполнения задачи.
Еще один круговой прогресс-бар в этой подборке. Макет можно использовать не только как индикатор загрузки, но и как график, например при создании интерактивных диаграмм.
Самая обычная полоса загрузки с отсечками в процентах. Ничего особенного, зато бесплатно.
Сразу несколько вариантов для создания прогресс-бара. В макете представлено три круговых индикатора и два варианта горизонтальной полосы.
Необычное решение – в этом макете нет привычной индикации. Круглый индикатор постепенно заполняется как бы водой или другой жидкостью. В данном варианте жидкость имеет другой цвет, но ничто не мешает заменить ее цвет на любой другой. Интересно, как будет смотреться данный прогресс-бар, если его правильно анимировать.
0 комментариев