Круговые индикаторы. HTML & CSS

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

Создать круговой индикатор можно с помощью 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, а затем приступать к разработке дизайна индикаторов.

Для начала зададим ширину элементов

После этого займемся расположением и размерностью.

Используемые свойства:

  1. position: absolute; — задает абсолютное позиционирование для элемента. Блок с этим свойством будет располагаться относительно всей страницы, а не родительского блока.
  2. left: 0; top: 0; — координаты элемента внутри страницы.
  3. 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;

}

Круговые индикаторы

Закончив работу со стилями мы получили отличные индикаторы прогресса.

Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *