У меня есть вот такая вёрстка svg круга
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
}
.progressbar {
max-width: 150px;
font-size: 10px;
--color: rgb(0, 186, 16);
--percent: 0;
/* процент, насколько заполнен круг */
--PI: 3.141592;
--r: 30;
--strokeWidth: 2;
--lengthCircle: calc( 2 * var(--PI) * var(--r));
}
.progressbar circle {
r: var(--r);
}
.progressbar text {
fill: var(--color);
}
.progressbar__track {
fill: transparent;
stroke: #ededed;
stroke-width: var(--strokeWidth);
}
.progressbar__thumb {
fill: transparent;
stroke-dasharray: calc( var(--lengthCircle) * var(--percent) / 100) var(--lengthCircle);
stroke: var(--color);
stroke-width: var(--strokeWidth);
stroke-linecap: round;
transform-origin: center;
transform-box: fill-box;
transform: rotate(-90deg);
}
.progressbar__percent {
font-size: 16px;
}
<svg class="progressbar" viewBox="0 0 62 80">
<circle class="progressbar__track" cx="31" cy="31"></circle>
<circle class="progressbar__thumb" cx="31" cy="31"></circle>
<text x="32" y="33" class="progressbar__percent" text-anchor="middle" dominant-baseline="middle">
<tspan>0</tspan>
%
</text>
<text x="32" y="73" class="progressbar__info" text-anchor="middle" dominant-baseline="middle">
<tspan>Загрузочка ...</tspan>
</text>
</svg>
Я бы хотел придумать, как можно сделать так, когда CSS переменная --percent
для .progressbar
равняется 0, не было видной зелёной точке на старте, сверху круга.
Я приложу свой вариант в ответах, но может кто-то предложит что-то получше.
UPD: я приложил свой вариант, но хотелось бы, чтобы кто-то додумался, как можно было бы это правило описать в CSS.
Вот это правило:
opacity = 0, если
--percent
=== 0
opacity = 1, если--percent
!== 1