Полезное
605 статей › RSS

10 бесплатных макетов прогресс-баров

Индикатор загрузки данных или, как его еще часто называют, прогресс-бар – это один из важнейших элементов веб-дизайна. Наличие на сайте прогресс-бара может быть очень полезным, особенно, когда какой-либо процесс, например скачивание файла, происходит медленно. Для прогресс-бара очень важно, чтобы он был не только информативным, но еще и красивым. Этому элементу требуется очень качественная отрисовка – прогресс-бар должен быть оригинальным и эффектным. Если пользователю, зашедшему на сайт, приходится ждать, то нужно сделать так, чтобы его ожидание было не скучным. Если индикатор загрузки сделан на высоком уровне и наглядно отражает состояние прогресса выполнения задачи, то у пользователя останется положительное впечатление о сайте, а это именно то, что нужно, особенно если скрипты работают достаточно медленно. FreelanceToday представляет вашему вниманию 10 бесплатных макетов прогресс-баров с необычным дизайном.

 

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

 

ROUND PROGRESS METER

loading 1 

 

Круглый прогресс-бар с полосой загрузки, изменяющей цвет в зависимости от хода выполнения задачи. Очень интересное решение – пользователь может «залипнуть», глядя, как полоса постепенно меняет свой цвет.

 

LUMINOUS PROGRESS BAR

loading 2 

 

Даже простенькую горизонтальную полосу загрузки можно сделать очень привлекательной, добавив эффект свечения.

 

LOADING BAR

loading 2 

 

Очень интересный подход к дизайну прогресс-бара. Здесь мы видим не одну, а сразу четыре полосы загрузки. Посетителю сайта однозначно будет не скучно наблюдать за процессом загрузки.

 

PROGRESS BAR + RETINA READY

loading 4 

 

Горизонтальный прогресс-бар с переключателем. Во время загрузки или скачивания файлов пользователь видит, сколько осталось времени до окончания процесса и может убедиться, что он работает с тем файлом, который ему нужен – информация представлена в верхней части полосы загрузки.

 

FUNKY LOADING BAR

loading 5 

 

Очень простой прогресс-бар от дизайнера Айзека Санчеса.



При наведении на полосу прокрутки, по-видимому, должна появляться подсказка с цифрами в процентах.

 

DARK UI

loading 6 

 

Прогресс-бар для мобильных приложений с темным пользовательским интерфейсом. Полоса загрузки меняет свой оттенок на более светлый в процессе выполнения задачи.

 

LOADING BAR

loading 7 

 

Еще один круговой прогресс-бар в этой подборке. Макет можно использовать не только как индикатор загрузки, но и как график, например при создании интерактивных диаграмм.

 

BLUE LOADING BAR

loading 8 

 

Самая обычная полоса загрузки с отсечками в процентах. Ничего особенного, зато бесплатно.

 

PROGRESS BARS

loading 9 

 

Сразу несколько вариантов для создания прогресс-бара. В макете представлено три круговых индикатора и два варианта горизонтальной полосы.

 

CUSTOM DOWNLOAD BUTTON

loading 10 

 

Необычное решение – в этом макете нет привычной индикации. Круглый индикатор постепенно заполняется как бы водой или другой жидкостью. В данном варианте жидкость имеет другой цвет, но ничто не мешает заменить ее цвет на любой другой. Интересно, как будет смотреться данный прогресс-бар, если его правильно анимировать. 

    Понравилась статья? Поделись с друзьями!

    Поделиться

или

следи за новостями в соцсетях

Подпишись на рассылку.

Без рекламы и только самое интересное!

Комментарии

Всего: 0 комментариев

Оставлять комментарии могут только пользователи.

Подписка на Freelance.Today





или

следи за новостями в соцсетях


Фриланс новости, биржи фриланса, freelance