37 lines
1023 B
Plaintext
37 lines
1023 B
Plaintext
<div class="np-card-content np-card-content-vertical np-card-padding align-center">
|
|
<h3 class="np-card-content-title">
|
|
{{name}}
|
|
</h3>
|
|
<svg
|
|
class="progress-ring"
|
|
width="120"
|
|
height="120">
|
|
<circle
|
|
class="progress-ring__circle circle-{{name}}"
|
|
stroke="white"
|
|
stroke-width="4"
|
|
fill="transparent"
|
|
r="52"
|
|
cx="60"
|
|
cy="60"/>
|
|
<text x="50%" y="50%" text-anchor="middle" stroke="black" stroke-width="2px" dy=".3em">{{count}}</text>
|
|
</svg>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function(){
|
|
var circle = document.getElementsByClassName("circle-{{name}}")[0];
|
|
var radius = circle.r.baseVal.value;
|
|
var circumference = radius * 2 * Math.PI;
|
|
|
|
circle.style.strokeDasharray = `${circumference} ${circumference}`;
|
|
circle.style.strokeDashoffset = `${circumference}`;
|
|
|
|
function setProgress(percent) {
|
|
const offset = circumference - percent * circumference;
|
|
console.log(offset)
|
|
circle.style.strokeDashoffset = offset;
|
|
}
|
|
setProgress('{{ count | divided_by: total }}')
|
|
})
|
|
</script> |