79 lines
2.0 KiB
Plaintext
79 lines
2.0 KiB
Plaintext
<div class="np-progress-ring-wrapper">
|
|
<svg
|
|
class="progress-ring"
|
|
width="{{ size }}"
|
|
height="{{ size }}">
|
|
<circle
|
|
class="progress-ring__circle circle-{{name}}"
|
|
stroke="#fff"
|
|
stroke-width="10"
|
|
fill="transparent"
|
|
r="52"
|
|
cx="60"
|
|
cy="60"/>
|
|
<circle
|
|
class="progress-ring__circle circle-bg"
|
|
stroke="rgba(100, 100, 100, 0.15)"
|
|
stroke-width="10"
|
|
fill="transparent"
|
|
r="52"
|
|
cx="60"
|
|
cy="60"/>
|
|
<text x="50%" y="50%" text-anchor="middle" stroke="t#000" stroke-width="1px" fill="#fff" dy=".3em">{{count}}</text>
|
|
</svg>
|
|
<h3 class="np-card-content-title np-progress-circle-label">
|
|
{{name}}
|
|
</h3>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", 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;
|
|
circle.style.strokeDashoffset = offset;
|
|
}
|
|
setProgress('{{ count | divided_by: total }}')
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.np-progress-ring-wrapper {
|
|
flex: 0;
|
|
flex-direction: column;
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 1.5rem 1rem 1rem 1rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.progress-ring circle { stroke-linecap: round; }
|
|
.progress-ring text { font-size:2rem; }
|
|
.progress-ring__circle {
|
|
transition: stroke-dashoffset 0.35s;
|
|
transform: rotate(-90deg);
|
|
transform-origin: center;
|
|
}
|
|
|
|
.np-progress-circle-label {
|
|
color:#fff;
|
|
text-transform: uppercase;
|
|
font-size:0.875rem;
|
|
margin-top:1rem;
|
|
}
|
|
|
|
@media (min-width:768px) {
|
|
.np-progress-ring-wrapper { padding: 1.5rem 0.4rem 1rem 0.4rem;}
|
|
}
|
|
|
|
@media (min-width:1170px) {
|
|
.progress-ring text { font-size:2.5rem; }
|
|
.np-progress-ring-wrapper { padding: 1.5rem 1rem 1rem 1rem;}
|
|
}
|
|
</style> |