На многих сайтах вы могли видеть круговые индикаторы, например индикаторы прогресса на сайте-визитке. Может использоваться в личном кабинете пользователя при доставке товара, оформлении договора и т.д. Как правило указывается в процентах.
Создать круговой индикатор можно с помощью CSS и SVG стилей. Преимущества SVG в меньшем потреблении ресурсов(ускоряет работу). Кроме высокой скорости загрузки, SVG улучшает веб-страницу для поисковых страниц.
HTML для создания круговых индикаторов
В HTML документе мы будем указывать значения SVG. Он и будет лежать в основе создания нашего индикатора. Чтобы создать основу для работы с ним, впишите в документ тег svg с атрибутом viewBox. Он отвечает за отображение картинки. Может отобразить её полностью, или же отдельную часть.
Можете задать размеры с помощью атрибутов «width» и «height», в пикселях. Это не обязательно, так как чаще всего, для размерности используется CSS. В нашем примере данные атрибуты не используются. Рассмотрим на примере создания первого индикатора:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Круговой индикатор процесса с помощью SVG и CSS3</title>
<link rel="stylesheet" href="css/style.css">
<link media="screen" href="demo/styles/demo.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<!--Начало кода используемого для демонстрации -->
<div id="controls">
<div align=right><a class="close" title="Закрыть" onclick="document.getElementById('controls').style.display='none';">X</a></div>
<table cellpadding="0" cellspacing="0" id="demo_navi">
<tr>
<td width="220"><a href="/" rel="nofollow" ><div class="logo"><b><font color=#c3e425></font></b></div></a></td><td width="45"><div class="demo"></div></td>
<td style="text-overflow: ellipsis;"><a href="" class="go-bottom" rel="nofollow" ><div class="name">Круговой индикатор процесса с помощью SVG и CSS3</div></a></td>
</tr>
</table>
<br><br><br><br>
<ul class="progress">
<!-- Item -->
<li data-name="Знания SVG" data-percent="13%">
<svg viewBox="-10 -10 220 220">
<g fill="none" stroke-width="13" transform="translate(100,100)">
<path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
<path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
<path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
<path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
<path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
<path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="81"></path>
</svg>
</li>
<!-- Item -->
<li data-name="Знания HTML5" data-percent="87%">
<svg viewBox="-10 -10 220 220">
<g fill="none" stroke-width="2" transform="translate(100,100)">
<path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
<path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
<path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
<path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
<path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
<path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="547"></path>
</svg>
</li>
<!-- Item -->
<li data-name="Знания jQuery" data-percent="13%">
<svg viewBox="-10 -10 220 220">
<g fill="none" stroke-width="12" transform="translate(100,100)">
<path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
<path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
<path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
<path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
<path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
<path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="81"></path>
</svg>
</li>
<!-- Item -->
<li data-name="Знания UI" data-percent="97%">
<svg viewBox="-10 -10 220 220">
<g fill="none" stroke-width="9" transform="translate(100,100)">
<path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
<path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
<path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
<path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
<path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
<path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="610"></path>
</svg>
</li>
<!-- Item -->
<li data-name="Знания PHP" data-percent="58%">
<svg viewBox="-10 -10 220 220">
<g fill="none" stroke-width="6" transform="translate(100,100)">
<path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
<path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
<path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
<path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
<path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
<path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="364"></path>
</svg>
</li>
<!-- Item -->
<li data-name="Знания CSS" data-percent="100%">
<svg viewBox="-10 -10 220 220">
<g fill="none" stroke-width="6" transform="translate(100,100)">
<path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
<path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
<path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
<path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
<path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
<path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="629"></path>
</svg>
</li>
</ul>
<!-- Defining Angle Gradient Colors -->
<svg width="0" height="0">
<defs>
<linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
<stop stop-color="#618099"/>
<stop offset="100%" stop-color="#8e6677"/>
</linearGradient>
<linearGradient id="cl2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
<stop stop-color="#8e6677"/>
<stop offset="100%" stop-color="#9b5e67"/>
</linearGradient>
<linearGradient id="cl3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
<stop stop-color="#9b5e67"/>
<stop offset="100%" stop-color="#9c787a"/>
</linearGradient>
<linearGradient id="cl4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
<stop stop-color="#9c787a"/>
<stop offset="100%" stop-color="#817a94"/>
</linearGradient>
<linearGradient id="cl5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
<stop stop-color="#817a94"/>
<stop offset="100%" stop-color="#498a98"/>
</linearGradient>
<linearGradient id="cl6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
<stop stop-color="#498a98"/>
<stop offset="100%" stop-color="#618099"/>
</linearGradient>
</defs>
</svg>
<script src="js/index.js"></script>
</body>
</html>Для их создания используется тег path.
Тег <g fill> является основной для создания всех индикаторов. Его параметр stroke-width отвечает за их ширину. В примере стоит значение stroke-width = «5», при желании его можно изменить. Кроме визуальной части и расположения, на страницу это никак не повлияет.
CSS-стили для создания круговых индикаторов
Основа заложена, но теперь нам нужно её стилизовать. Чистый SVG, без стилей, не будет иметь хорошего вида. Поэтому мы обратимся к CSS. Нужно подключить файл style.css, а затем приступать к разработке дизайна индикаторов.
Для начала зададим ширину элементов
После этого займемся расположением и размерностью.
Используемые свойства:
- position: absolute; — задает абсолютное позиционирование для элемента. Блок с этим свойством будет располагаться относительно всей страницы, а не родительского блока.
- left: 0; top: 0; — координаты элемента внутри страницы.
- transfom: rotate(-90-deg); — трансформация элемента.
.progress {
position: relative;
display: inline-block;
padding: 0;
text-align: center;
}
.progress < li {
display: inline-block;
position: relative;
text-align: center;
color: #93A2AC;
font-family: Lato;
font-weight: 100;
margin: 2rem;
}
.progress < li:before {
content: attr(data-name);
position: absolute;
width: 100%;
bottom: -2rem;
font-weight: 400;
}
.progress < li:after {
content: attr(data-percent);
position: absolute;
width: 100%;
top: 3.7rem;
left: 0;
font-size: 2rem;
text-align: center;
}
.progress svg {
width: 10rem;
height: 10rem;
}Закончив работу со стилями мы получили отличные индикаторы прогресса.
