48 lines
1.2 KiB
Plaintext
48 lines
1.2 KiB
Plaintext
<div class="progress-ring-wrapper">
|
|
<svg
|
|
class="progress-ring"
|
|
width="{{ size }}"
|
|
height="{{ size }}">
|
|
<circle
|
|
class="circle circle-bg"
|
|
stroke="{{ stroke_color_bg }}"
|
|
stroke-width="10"
|
|
fill="transparent"
|
|
r="52"
|
|
cx="60"
|
|
cy="60"
|
|
/>
|
|
<circle
|
|
class="circle circle-{{ name }}"
|
|
stroke="{{ stroke_color }}"
|
|
stroke-width="10"
|
|
fill="transparent"
|
|
r="52"
|
|
cx="60"
|
|
cy="60"
|
|
/>
|
|
<text x="50%" y="50%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="{{ number_color }}" dy=".3em">
|
|
{{ count }}
|
|
</text>
|
|
</svg>
|
|
<h3 class="np-card-content-title progress-circle-label">
|
|
{{ name }}
|
|
</h3>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
let circle = document.getElementsByClassName("circle-{{ name }}")[0];
|
|
let radius = circle.r.baseVal.value;
|
|
let circumference = radius * 2 * Math.PI;
|
|
|
|
circle.style.strokeDasharray = `${circumference} ${circumference}`;
|
|
circle.style.strokeDashoffset = `${circumference}`;
|
|
|
|
function setProgress(percent) {
|
|
circle.style.strokeDashoffset = circumference - percent * circumference;
|
|
}
|
|
setProgress('{{ count | divided_by: total }}')
|
|
})
|
|
</script>
|