97 lines
2.1 KiB
Plaintext
97 lines
2.1 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="#000"
|
|
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;
|
|
console.log(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;
|
|
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: #000;
|
|
text-transform: uppercase;
|
|
font-size: 0.875rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.np-progress-ring-wrapper {
|
|
padding: 1.5rem 0.4rem 1rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1170px) {
|
|
.progress-ring text {
|
|
font-size: 2.5rem;
|
|
}
|
|
.np-progress-ring-wrapper {
|
|
padding: 1.5rem 1rem 1rem;
|
|
}
|
|
}
|
|
</style> |