Иногда просматривая резюме веб-дизайнеров я сталкиваюсь интерактивным отображением их скилов при помощи индикаторов прогресса. Сегодня я хочу рассказать как создать замечательные градиентные индикаторы прогресса в виде кругов при помощи SVG и CSS3. Такой прием станет полезным не только для резюме, но и на сайте, если хотите отобразить датчик прогресса. Простота работы и графика SVG положительно скажется на скорости загрузки, а также на поисковых запросах, давайте посмотрим, что у нас с этого получилось.

 

Много интересных бесплатных шаблонов, и премиум решений вы можете найти на сайте наших партнеров, успейте, пока действуют специальные предложения:

Шаг 1. HTML

Как вы уже поняли, вся завязка у нас будет именно на SVG, по этому мы продемонстрируем на одном примере, как создать такой индикатор:

Если вы заметили, то индикаторы у нас разной толщины, за это отвечает параметр stroke-width=»3″, измените значение на желаемое и получите толщину линий.

Шаг 2. CSS

Идем дальше, вся основная работа возложена на SVG, но и стили у нас играют свою роль, например нам нужно отобразить все индикаторы правильно на странице:

В результате мы имеет такие замечательные индикаторы, создание которых не требует особых знаний кода. А как они вам?

Вот и все. Готово!