41 lines
1.3 KiB
Plaintext
41 lines
1.3 KiB
Plaintext
{% assign radius = 93 %}
|
|
{% assign pi = 3.14159 %}
|
|
{% assign circumference = radius | times: 2 | times: pi %}
|
|
{% assign progress = count | times: 1.0 | divided_by: total %}
|
|
{% assign offset = 1 | minus: progress | times: circumference %}
|
|
|
|
{% assign circle_background_color = '#e5e9eb' %}
|
|
{% assign progress_number_color = '#1b3e4f' %}
|
|
|
|
<div class="progress-circle-wrapper">
|
|
<svg
|
|
class="progress-circle"
|
|
width="212"
|
|
height="212">
|
|
<circle
|
|
class="circle circle-bg"
|
|
stroke="#6FCFEB"
|
|
stroke-width="17"
|
|
fill="transparent"
|
|
r="{{ radius }}"
|
|
cx="106"
|
|
cy="106"
|
|
/>
|
|
<circle
|
|
class="circle"
|
|
stroke="#185A7D"
|
|
stroke-width="17"
|
|
fill="transparent"
|
|
r="{{ radius }}"
|
|
cx="106"
|
|
cy="106"
|
|
stroke-dasharray="{{ circumference }} {{ circumference }}"
|
|
stroke-dashoffset="{{ offset }}"
|
|
style='transform: rotate(-90deg);transform-origin: 50% 50%;'
|
|
/>
|
|
<text class='dt' x="50%" y="60%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="{{ progress_number_color }}" dy=".3em">
|
|
<tspan x="50%" dy="0em" class="progress-circle-big-text">{{count}}</tspan>
|
|
<tspan x="50%" dy="1.4em" class="progress-circle-text">of {{ total }}</tspan>
|
|
</text>
|
|
</svg>
|
|
</div> |